SANS .btn-group) ne matchent pas → header inchangé.
* S'applique aussi à simulateur3p (même header par défaut + cartouche) → nav en haut, cohérent. */
.tunnel-skin header.row:has(.btn-group, .tunnel-nav) {
display: flex;
flex-direction: column;
}
/* Neutralise le clearfix Bootstrap (`.row:before/:after`) qui, en contexte flex, deviendrait
* deux items vides parasites (filet/espace). */
.tunnel-skin header.row:has(.btn-group, .tunnel-nav)::before,
.tunnel-skin header.row:has(.btn-group, .tunnel-nav)::after {
display: none !important;
}
/* Le bloc du cartouche (nav) passe avant le titre, en pleine largeur (le col-sm-4 par défaut
* ne fait que 33% → trop étroit pour la nav). */
.tunnel-skin header.row:has(.btn-group, .tunnel-nav) > div:has(.btn-group, .tunnel-nav) {
order: -1;
width: 100%;
}
/* ── Nav haute V2 (GLOBAL, hors `.tunnel-skin`) ────────────────────────────────────
* Aligne la nav haute des pages V2 publiques (ESI `buttons.{public,private}.v2`,
* markup `.button-group--condensed`) sur les pills du tunnel React (TunnelTopBar),
* en miroir du `.btn-group` ci-dessus. Volontairement GLOBAL : aujourd'hui seule la
* page rapport rend cette nav ; toute future page V2 publique en hérite.
* `!important` requis : app.css (`.header .header__nav > .button-group > *`, spéc. 0,3,0)
* est chargé APRÈS cette feuille (bloc `stylesheets` rendu après le head). */
.button-group--condensed {
gap: 8px !important; /* décolle les pills (app.css : gap 0) */
}
.button-group--condensed > * {
border: 1px solid #D2DDF4 !important; /* warm-grey-200 */
border-radius: 10px !important; /* écrase aussi les coins 4px first/last-child */
color: #144B66 !important; /* secondary-900 */
background-color: #FFFFFF !important;
box-shadow: none !important;
transition: border-color .15s ease-in-out;
}
.button-group--condensed > *:hover {
border-color: #909CB1 !important; /* warm-grey-500 */
}
/* ── Page rapport CEE (opt-in `.tunnel-skin` sur `.wrapper`) ────────────────────────
* La page rapport a une coquille PROPRE (`.wrapper > .col > .app-container`), PAS le
* `.container.table-bordered` Bootstrap → ces règles la ciblent spécifiquement.
* Spécificité 0,2,0 / 0,3,0 > app.css (0,1,0) chargé après → pas besoin de `!important`.
* Scopées via `.app-container` (présent UNIQUEMENT sur rapport) → aucun effet sur les
* autres pages `.tunnel-skin` (simulateur, etc.). */
/* #3 — Carte arrondie, centrée, contrainte en largeur (parité demande2 : max-w 1080, mx-auto) */
.tunnel-skin .app-container {
max-width: 1080px;
margin: 20px auto; /* petit air haut/bas comme demande2 (py-5), pas collée au top */
border: 1px solid #DDDDDD; /* neutrals-cold-grey-100 (demande2) */
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
/* #1 — Bouton submit : vert DS neo (primary-500/700) au lieu du turquoise legacy #13C4A3.
* On surcharge la variable consommée par `.btn` (fond + bordure) ; le texte reste blanc. */
.tunnel-skin .app-container .btn--primary {
--consoneo-btn-background: #24B283; /* primary-500 (demande2) */
}
.tunnel-skin .app-container .btn--primary:hover {
--consoneo-btn-background: #177F89; /* primary-700 (demande2) */
}
/* ── Fix échelle rem des îlots DS React — SOURCE UNIQUE (pages V1 legacy `.tunnel-skin`) ─
* Les pages V1 imposent `html { font-size: 62.5% }` (base 10px, ancien système de typo en
* rem). Les composants DS neo/projectBundle (Button, FaIcon…) sont basés sur `rem` → un îlot
* React monté sur ces pages rend à 0.625× (texte/padding/icônes/rayons riquiqui). `rem` ne se
* rebase PAS par sous-arbre (toujours relatif à ) ; flipper le root casserait toute la
* typo legacy. On restaure l'échelle nominale via `zoom` (16/10 = 1.6).
*
* Classe UNIQUE et PARTAGÉE par tous les îlots de la page (au lieu d'un `zoom` inline recopié) :
* - nav haute :
hôte de `react_component('Tunnel/TunnelTopBarStandard')` (rapport.html.twig) ;
* - boutons secondaires : conteneur dans `RapportSecondaryActions` ;
* - modale : la CARTE de `TunnelModal` (PAS l'overlay) ;
* - CTA accord : le bouton de `RapportContractAction`.
*
* Gatée sous `.tunnel-skin` → s'applique UNIQUEMENT sur les pages V1 concernées ; sur une page
* V2 (root déjà 16px) la classe est inerte → les mêmes composants (ex. TunnelModal) y restent
* nominaux automatiquement, sans double zoom.
* ⚠️ La poser sur l'élément À METTRE À L'ÉCHELLE, jamais sur un overlay `fixed` (qui doit rester
* en unités viewport), ni deux fois sur des éléments imbriqués (le zoom se cumulerait). */
.tunnel-skin .tunnel-skin-rem-fix {
zoom: 1.6;
}