/* +==========================================================================+
   | ACRONET - CHARTE V6                                                      |
   | Feuille unique de la maquette « bleu nuit / orange / creme ».            |
   +==========================================================================+
   | Palette : bleu nuit #11263F - orange #FF611C - creme #FAF7F1             |
   |                                                                          |
   | POURQUOI UN FICHIER, ET PAS UN <style> DE PAGE : meme regle que          |
   | accueil-claire.css. Un <style> inline n'est jamais mis en cache par le    |
   | navigateur et se retelecharge a chaque page vue.                          |
   |                                                                          |
   | TOUT est porte par `.v6-page` (classe posee sur <body>). C'est ce qui     |
   | permet a cette charte de cohabiter avec theme.css sans le modifier :      |
   | `body.v6-page` (0,1,1) l'emporte sur `body` (0,0,1), et aucune regle      |
   | d'ici ne peut fuir sur une page qui ne porte pas la classe.               |
   |                                                                          |
   | NE PAS toucher aux blocs « composants conserves » (section 6) : ils       |
   | repeignent en clair la recherche interne, le burger et les icones de la   |
   | navbar, dont le MARQUAGE et le JS restent ceux du site (php/js.php).      |
   | Changer une classe ici sans changer php/header.php casse la            |
   | recherche ET le menu mobile d'un coup.                                    |
   +==========================================================================+ */

/* ==========================================================================
   1. POLICE - Plus Jakarta Sans, AUTO-HEBERGEE
   Deux fichiers variables (latin + latin-ext), 49 ko au total. Ne pas
   revenir au lien fonts.googleapis.com de la maquette : c'est un transfert
   d'IP vers un tiers hors UE avant tout consentement, exactement ce que le
   site evite deja en hebergeant Poppins.
   ========================================================================== */
@font-face{
	font-family:'Plus Jakarta Sans';
	font-style:normal;
	font-weight:400 800;
	font-display:swap;
	src:url('../fonts/PlusJakartaSans-Variable-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Plus Jakarta Sans';
	font-style:normal;
	font-weight:400 800;
	font-display:swap;
	src:url('../fonts/PlusJakartaSans-Variable-latin-ext.woff2') format('woff2');
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   2. JETONS
   ========================================================================== */
.v6-page{
	--v6-bleu:#11263F;
	--v6-bleu-2:#1B3A5C;      /* degrades et survols sombres */
	--v6-bleu-3:#0B1B2E;      /* pied de page */
	--v6-orange:#FF611C;      /* L'ORANGE. Il n'y en a qu'un, celui du logo.
	                             ⛔ IL N'EST JAMAIS UNE LETTRE. Mesure : en
	                             texte sur blanc il ne donne que 3,01:1, sur le
	                             creme 2,81:1 - et AUCUN orange plus clair que
	                             #D2450A n'atteint 4,5:1 sur du blanc. C'est de
	                             l'arithmetique, pas du gout : le seul moyen de
	                             garder un orange unique et vif etait donc de
	                             ne plus l'employer en texte.
	                             LA REGLE : l'orange est une SURFACE (bouton,
	                             pastille, bande, surlignage) ou un GRAPHISME
	                             (picto, filet, anneau) - le seuil des
	                             graphismes est 3:1, il le tient. Le texte pose
	                             DESSUS est en bleu nuit : 5,08:1. */
	--v6-bleu-clair:#85AEDF;  /* TEXTE SECONDAIRE SUR FOND BLEU NUIT, et rien
	                             d'autre. Mesures : 6,64:1 sur #11263F, 7,53:1
	                             sur le pied de page #0B1B2E, 5,05:1 sur le
	                             degrade #1B3A5C - confortable partout.
	                             ⛔ JAMAIS sur un fond clair : 2,3:1 sur blanc,
	                             tres loin du seuil. Il remplace les
	                             `rgba(255,255,255,.7x)` qui servaient de texte
	                             secondaire : une teinte assumee se controle,
	                             une opacite se subit - elle depend du fond
	                             qu'elle recouvre, qui change d'une section a
	                             l'autre. */
	--v6-creme:#FAF7F1;       /* LE fond de la page, comme chez o2switch. */
	--v6-peche:#FFE7DC;       /* fond des pastilles d'icones */
	--v6-line:#E7DFD3;
	--v6-texte:#243447;
	--v6-doux:#5A6E82;        /* AA sur creme : 4,7:1. Le #63788C de la
	                             maquette tombait a 3,9:1, sous le seuil. */
	--v6-blanc:#FFFFFF;       /* le blanc est une couleur de la charte comme une
	                             autre : il a son jeton, on n'ecrit plus #fff. */
	/* BORNES MESUREES du degrade de la bande orange, et de lui seul.
	   ⛔ Ne pas descendre plus bas : a #E2500F le texte bleu nuit tombe a 3,92:1. */
	--v6-orange-haut:#FF6E2E;
	--v6-orange-bas:#F25A15;
	/* ETATS. ⚠ Ce ne sont PAS des couleurs de marque : ce sont des signaux, et
	   ils doivent rester lisibles independamment de la charte. Mesures sur
	   blanc : erreur 6,53:1, succes 5,39:1. ⛔ Ne pas essayer de les faire
	   « entrer dans la palette » : un message d'erreur qui ressemble a un
	   accent de marque n'alerte plus personne. */
	--v6-erreur:#B3261E;
	--v6-erreur-rgb:179,38,30;  /* le meme rouge en canaux, pour les SURFACES
	                               (un lisere, un fond d'alerte) : la fonction
	                               rgba() a besoin des composantes, pas du hexa. */
	--v6-attente:#8A5A00;     /* AMBRE FONCE : l'etat « en attente » d'une
	                             commande. 5,3:1 sur blanc. ⛔ Pas le #FACC15
	                             d'origine : 1,7:1, il etait cale sur un fond
	                             quasi-noir. */
	--v6-attente-rgb:138,90,0;
	--v6-succes:#1B7A3D;
	--v6-succes-rgb:27,122,61;
	--v6-succes-nuit:#5BD489; /* le meme signal, mais POSE SUR LE BLEU NUIT :
	                             #1B7A3D n'y vaut que 1,9:1. Celui-ci donne
	                             7,4:1. ⛔ Ne pas les intervertir. */
	--v6-orange-bas-rgb:242,90,21;
	--v6-etoile:#8A6503;      /* or fonce, pour les etoiles sur fond CLAIR.
	                             ↺ Assombri le 2026-08-25 : a #976E03 il donnait
	                             4,35:1 sur la carte de confiance des pages
	                             d'offre - sous le seuil du texte. Les etoiles
	                             portent role=img, mais elles sont RENDUES en
	                             glyphes : on ne s'abrite pas derriere l'attribut.
	                             Mesure apres : 5,01:1. */
	--v6-etoile-nuit:#F2B01E; /* or clair, pour les etoiles sur BLEU NUIT (8:1) */
	--v6-etoile-google:#FBBC04; /* 🔴 LE JAUNE DE GOOGLE, celui de ses propres
	                             etoiles d'avis. Il ne donne que 1,71:1 sur du blanc :
	                             seul, il ne pourrait PAS porter une note. Il ne le fait
	                             pas - l'etoile est une forme PLEINE cerclee de
	                             `--v6-etoile` (6,1:1), et c'est la silhouette qui tient
	                             le contraste pendant que le remplissage reste
	                             reconnaissable au premier coup d'oeil. La note chiffree
	                             est par ailleurs TOUJOURS ecrite a cote (« 5,0 sur
	                             Google ») : les etoiles renforcent, elles n'informent
	                             pas seules.
	                             ⛔ Ne jamais s'en servir pour du TEXTE. */
	--v6-placeholder:#7A8B9B; /* ⚠️ 3,50:1 sur blanc : sous le seuil du texte.
	                             Herite de la maquette, a arbitrer. */
	--v6-masque:#000;         /* ⚠️ PAS une couleur de la charte : c'est l'opacite
	                             d'un `mask`, ou seul le canal alpha compte. */

	/* --- CANAUX RVB -------------------------------------------------------
	   Un `rgba()` ne sait pas lire un jeton hexadecimal : sans le triplet de
	   canaux, toute transparence rouvrait la porte aux valeurs en dur. Chaque
	   couleur de la charte a donc son jumeau `-rgb`.
	   LA REGLE : un FOND s'ecrit `rgba(var(--v6-x-rgb),a)`, meme opaque (a=1) -
	   l'opacite devient une decision visible et non un effet de bord. Les
	   autres proprietes de couleur (color, border-color, stroke, fill)
	   s'ecrivent `var(--v6-x)`.
	   ⛔ Plus JAMAIS `rgba(17,38,63,.06)` ni `#fff` dans une declaration. */
	--v6-bleu-rgb:17,38,63;
	--v6-bleu-2-rgb:27,58,92;
	--v6-bleu-3-rgb:11,27,46;
	--v6-orange-rgb:255,97,28;
	--v6-bleu-clair-rgb:133,174,223;
	--v6-creme-rgb:250,247,241;
	--v6-peche-rgb:255,231,220;
	--v6-line-rgb:231,223,211;
	--v6-blanc-rgb:255,255,255;

	--v6-r:8px;               /* rayon standard, volontairement discret */
	--v6-r-carte:14px;
	--v6-ombre:0 14px 40px rgba(var(--v6-bleu-rgb),.10);
	--v6-ombre-s:0 6px 18px rgba(var(--v6-bleu-rgb),.07);
	--v6-glisse:cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   3. SOCLE
   ========================================================================== */
body.v6-page{
	font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
	font-size:1.0625rem;
	line-height:1.65;
	color:var(--v6-texte);
	background:rgba(var(--v6-creme-rgb),1);
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
.v6-page h1,.v6-page h2,.v6-page h3,.v6-page h4{
	font-weight:800;color:var(--v6-bleu);letter-spacing:-.025em;line-height:1.15;
}
.v6-page h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
.v6-page h2{font-size:clamp(1.85rem,3.4vw,2.6rem)}
.v6-page h3{font-size:1.18rem;font-weight:700;letter-spacing:-.015em}
.v6-page h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.v6-page h5{font-size:.98rem;font-weight:700;color:var(--v6-bleu);letter-spacing:-.01em;line-height:1.3}
.v6-page h6{font-size:.88rem;font-weight:800;color:var(--v6-bleu);letter-spacing:.02em;line-height:1.35}

/* 🔴 LES CLASSES `.h1` A `.h6` DOIVENT RESTER OPERANTES, ET ELLES NE L'ETAIENT PAS.
   ----------------------------------------------------------------------------
   C'est la convention Bootstrap, et celle du site : on choisit le NIVEAU d'un
   titre pour la structure du document (un seul `<h1>`, pas de saut de niveau)
   et sa TAILLE avec une classe - `<h1 class="h2">`. Les deux decisions sont
   independantes, et c'est ce qui permet d'avoir un plan de document correct
   sans que la page ressemble a une affiche.

   Le probleme : `.v6-page h1` est a (0,1,1) et `.h2` de Bootstrap a (0,1,0).
   La charte gagnait donc TOUJOURS, et toutes ces classes etaient INERTES -
   releve sur /mon-compte, dont les titres sortaient a 3,5 rem.
   Elles sont a (0,2,0) ici : elles passent devant la regle d'element, quel que
   soit l'ordre des feuilles.

   ⚠️ Les valeurs sont EXACTEMENT celles des regles d'element ci-dessus. Toute
   modification de l'echelle doit se faire aux DEUX endroits, sinon
   `<h2>` et `<h1 class="h2">` divergent. C'est le prix de la convention.
   ⛔ Ne pas « simplifier » en supprimant l'un des deux jeux : sans les
   elements, un titre sans classe n'a plus de taille ; sans les classes, le
   marquage existant du site casse (189 usages). */
.v6-page .h1,.v6-page .h2,.v6-page .h3,.v6-page .h4,.v6-page .h5,.v6-page .h6{
	font-weight:800;color:var(--v6-bleu);letter-spacing:-.025em;line-height:1.15;
}
.v6-page .h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
.v6-page .h2{font-size:clamp(1.85rem,3.4vw,2.6rem)}
.v6-page .h3{font-size:1.18rem;font-weight:700;letter-spacing:-.015em}
.v6-page .h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.v6-page .h5{font-size:.98rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.v6-page .h6{font-size:.88rem;font-weight:800;letter-spacing:.02em;line-height:1.35}
.v6-page p{margin-bottom:1rem}
/* ⚠️ PAS de couleur de lien globale ici. `.v6-page a{color:...}` (0,1,1) est
   plus specifique que `.menu-link` (0,1,0) de theme.css : elle repeignait en
   orange TOUS les liens du menu plein ecran conserve, qui doivent rester
   blancs. La regle ne porte donc que sur le soulignement, et la couleur est
   posee composant par composant. Le filet de securite pour les liens
   editoriaux venus de la base est deux lignes plus bas, borne a <main>. */
.v6-page a{text-decoration:none}
.v6-page main a:not([class]){color:var(--v6-bleu);text-decoration:underline;text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:2px}
.v6-page ::selection{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-blanc)}
.v6-page a:focus-visible,
.v6-page button:focus-visible,
.v6-page summary:focus-visible{outline:3px solid var(--v6-orange);outline-offset:3px}
.v6-page hr{border-color:var(--v6-line);opacity:1}

/* Pictogrammes du sprite (voir php/header.php). Le sprite lui-meme n'a rien
   a afficher : display:none en CSS, pas en attribut style. */
.v6-sprite{display:none}
.v6-ico{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.7;
	stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ==========================================================================
   LOGOTYPE - LA SIGNATURE DE LA CHARTE
   Le « o » d'acronet est remplace par un anneau orange dont le haut est ouvert
   et qui est incline a -45 deg. Au survol il finit son tour (+360 deg).
   Le nom est dessine en texte, pas en image : il se selectionne, se cherche,
   se met a l'echelle sans se pixelliser et suit la couleur du contexte
   (bleu nuit sur creme, blanc sur le pied de page).

   Trois details qui le font tenir, et qu'on casse en les « simplifiant » :
     - `display:inline-block` + `vertical-align:baseline` : l'anneau se cale
       sur la ligne de base comme le ferait la lettre qu'il remplace ;
     - le -.012em de marge basse compense l'arrondi optique, sans lui l'anneau
       flotte un pixel trop haut entre le « r » et le « n » ;
     - `flex:0 0 auto` : dans la barre en flex, sans lui, le menu ecrasait le
       logo jusqu'a deux pixels de large.
   ========================================================================== */
.v6-logo{display:inline-block;line-height:1;flex:0 0 auto}
.v6-logo__mot{font-weight:800;font-size:2rem;color:var(--v6-bleu);letter-spacing:-.045em;
	line-height:1;display:inline-block;white-space:nowrap}
.v6-pied .v6-logo__mot{color:var(--v6-blanc)}
/* ⚠️ L'anneau est dimensionne en `rem`, pas en `em` : ce sont les valeurs
   arretees par Stephane, elles ne suivent donc PAS la taille du mot. Toute
   reduction de `.v6-logo__mot` doit s'accompagner d'une reduction de l'anneau
   dans la meme media query, sinon il depasse la hauteur des lettres. Les
   trois paliers sont calibres sur le meme rapport que le palier de reference
   (anneau .75x le corps, filet .2x, descente .125x). */
.v6-logo__o{display:inline-block;box-sizing:border-box;vertical-align:baseline;
	width:1.5rem;height:1.5rem;margin:0 .055em -.25rem;border-radius:50%;
	border:.4rem solid var(--v6-orange);border-top-color:transparent;transform:rotate(-45deg);
	transition:transform .55s var(--v6-glisse)}
.v6-logo:hover .v6-logo__o{transform:rotate(315deg)}

/* ==========================================================================
   4. BOUTONS - le balayage
   ==========================================================================
   REFERENCE : o2switch.fr, cite par Stephane. Mecanique relevee dans leur
   page (bouton « Decouvrez notre Offre ! ») :
     - le bouton est `position:relative; overflow:hidden` ;
     - un pseudo-element ancre A GAUCHE passe de 0 a la pleine largeur ;
     - `transition: .2s ease-in-out` ;
     - au relachement il REPART vers la gauche, il ne traverse pas.
   Leur orange est d'ailleurs exactement le notre : rgb(255,97,28) = #FF611C.

   DEUX ECARTS ASSUMES :
     - on anime `transform:scaleX` et non `width`. Rendu identique sur un
       aplat, mais `width` refait la mise en page a chaque image quand
       `transform` reste sur le compositeur ;
     - le remplissage est le bleu nuit de la charte, la ou o2switch bascule
       sur un bleu clair.

   ⚠️ `transform-origin:left` sur les DEUX etats. La maquette d'origine
   basculait l'origine a droite au relachement, ce qui faisait TRAVERSER le
   remplissage. Ce n'est pas l'effet d'o2switch.
   ⚠️ Le libelle est dans un <span> positionne : sans lui, le texte passerait
   SOUS le remplissage.
   ========================================================================== */
.v6-page .v6-btn{
	position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:var(--v6-r);
	font-weight:700;font-size:1rem;padding:.9rem 1.75rem;line-height:1.3;
	display:inline-flex;align-items:center;justify-content:center;text-align:center;
	cursor:pointer;
}
.v6-page .v6-btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem}
.v6-page .v6-btn::before{content:"";position:absolute;inset:0;background:rgba(var(--v6-fill),1);
	transform:scaleX(0);transform-origin:left center;transition:transform .22s ease-in-out}
.v6-page .v6-btn:hover::before,
.v6-page .v6-btn:focus-visible::before{transform:scaleX(1)}
.v6-page .v6-btn-sm{padding:.6rem 1.15rem;font-size:.92rem}
.v6-page .v6-btn-bloc{width:100%}

.v6-page .v6-btn-bloc{width:100%}

/* -------------------------------------------------------------------------
   QUATRE VARIANTES, DEUX COULEURS x DEUX POIDS. La regle d'emploi :
     plein orange   action principale de la page      (devis, lancer un projet)
     plein bleu     action principale POSEE SUR ORANGE (la bande boutique)
     ligne orange   action secondaire COMMERCIALE     (tarifs, boutique)
     ligne bleu     action secondaire INFORMATIVE     (realisations, avis, FAQ)
   Le balayage est le meme pour les quatre : c'est la COULEUR qui hierarchise,
   jamais le comportement.

   ⚠️ CONTRASTE, mesure et non suppose. Sur l'orange #FF611C, le blanc ne
   donne que 3,01:1 - tres loin du seuil AA de 4,5:1 pour du texte de 16 px
   gras. Le BLEU NUIT y donne 5,08:1. Arbitrage de Stephane du 24/08 : on
   garde l'orange vif et c'est le LIBELLE qui s'adapte. ⛔ Ne pas repasser au
   blanc sur une surface orange, c'est le defaut corrige.
   ⚠️ Le libelle bascule d'un coup, sans transition de couleur : sur le bouton
   plein orange il passe au blanc des le survol, sinon il se retrouverait bleu
   nuit sur le bleu nuit du remplissage a mi-balayage. Les 220 ms ou du blanc
   court encore sur l'orange sont un etat TRANSITOIRE, pas un etat de repos :
   les quatre variantes passent AA au repos comme a l'arrivee.
   ------------------------------------------------------------------------- */
.v6-page .v6-btn-orange,
.v6-page .v6-btn-bleu,
.v6-page .v6-btn-ligne-orange,
.v6-page .v6-btn-ligne-bleu{transition:box-shadow .25s ease}

/* 1. PLEIN ORANGE - fond #FF611C, libelle BLEU NUIT (5,08:1) */
.v6-page .v6-btn-orange{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);--v6-fill:var(--v6-bleu-rgb);
	box-shadow:0 6px 18px rgba(var(--v6-orange-rgb),.30)}
.v6-page .v6-btn-orange:hover,
.v6-page .v6-btn-orange:focus-visible{color:var(--v6-blanc);box-shadow:0 10px 24px rgba(var(--v6-bleu-rgb),.22)}

/* 2. PLEIN BLEU NUIT - libelle blanc (15,3:1) */
.v6-page .v6-btn-bleu{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc);--v6-fill:var(--v6-orange-rgb)}
.v6-page .v6-btn-bleu:hover,
.v6-page .v6-btn-bleu:focus-visible{color:var(--v6-bleu)}

/* 3. LIGNE BLEU NUIT - fond blanc, filet ET libelle bleu nuit (15,3:1) */
.v6-page .v6-btn-ligne-bleu{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);--v6-fill:var(--v6-bleu-rgb);
	box-shadow:inset 0 0 0 1.5px var(--v6-bleu)}
.v6-page .v6-btn-ligne-bleu:hover,
.v6-page .v6-btn-ligne-bleu:focus-visible{color:var(--v6-blanc)}

/* 4. LIGNE ORANGE - fond blanc, filet #FF611C, libelle bleu nuit */
/* Le FILET est un graphisme : l'orange vif y est admis (3,01:1, seuil 3:1).
   Le LIBELLE est du texte : il est en bleu nuit au repos comme au survol. */
.v6-page .v6-btn-ligne-orange{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);--v6-fill:var(--v6-orange-rgb);
	box-shadow:inset 0 0 0 2px var(--v6-orange)}
.v6-page .v6-btn-ligne-orange:hover,
.v6-page .v6-btn-ligne-orange:focus-visible{color:var(--v6-bleu)}

/* -------------------------------------------------------------------------
   ⚠️ LE REMPLISSAGE DOIT CONTRASTER AVEC LE FOND QUI PORTE LE BOUTON, pas
   seulement avec le bouton lui-meme. C'est le defaut releve sur la carte
   « E-commerce Start » : un bouton orange pose sur une carte BLEU NUIT se
   remplissait de BLEU NUIT au survol - il disparaissait dans son propre
   support, le balayage ne se voyait plus. Meme probleme, symetrique, pour un
   bouton bleu pose sur la bande ORANGE.
   Quatre contextes sombres ou colores sont concernes : la carte de tarif mise
   en avant, l'encart d'appel final, le pied de page, et la bande boutique.
   Dans ces quatre cas le remplissage passe au BLANC et le libelle au bleu
   nuit : 15,3:1, et le survol se voit de loin.
   ⛔ Ne pas « simplifier » en remettant --v6-fill sur la variante de bouton :
   la bonne valeur depend du CONTEXTE, pas du bouton.
   ------------------------------------------------------------------------- */
.v6-page .v6-tarif--phare .v6-btn-orange,
.v6-page .v6-pied .v6-btn-orange,
.v6-page .v6-sec-orange .v6-btn-bleu,
.v6-page .v6-sec-nuit .v6-btn-orange{--v6-fill:var(--v6-blanc-rgb)}
.v6-page .v6-tarif--phare .v6-btn-orange:hover,
.v6-page .v6-tarif--phare .v6-btn-orange:focus-visible,
.v6-page .v6-pied .v6-btn-orange:hover,
.v6-page .v6-pied .v6-btn-orange:focus-visible,
.v6-page .v6-sec-orange .v6-btn-bleu:hover,
.v6-page .v6-sec-orange .v6-btn-bleu:focus-visible,
.v6-page .v6-sec-nuit .v6-btn-orange:hover,
.v6-page .v6-sec-nuit .v6-btn-orange:focus-visible{color:var(--v6-bleu)}

/* Variante sur fond SOMBRE (encart d'appel final) : filet blanc translucide. */
.v6-page .v6-btn-fantome{background:transparent;color:var(--v6-blanc);--v6-fill:var(--v6-blanc-rgb);
	box-shadow:inset 0 0 0 1.5px rgba(var(--v6-blanc-rgb),.45)}
.v6-page .v6-btn-fantome:hover,
.v6-page .v6-btn-fantome:focus-visible{color:var(--v6-bleu);box-shadow:inset 0 0 0 1.5px var(--v6-blanc)}

/* ==========================================================================
   5. EN-TETE : bandeau, barre collante, mega-menu pleine largeur
   ========================================================================== */
/* position:sticky et non fixed : c'est ce qui laisse le bandeau defiler et
   remonte la barre en haut de fenetre sans reserver de place dans le flux.
   La navbar du site (theme.css .acro-nav) est fixed ; on ne la reutilise donc
   PAS ici, seuls ses composants internes sont conserves (section 6). */
/* 🔴 LE « SAUT » DE LA BARRE AU DEFILEMENT, MESURE.
   Sonde sur 12 positions de defilement, en 428 px : la barre ne bouge PAS
   d'un centieme de pixel - meme `top`, meme hauteur (81,38 px), meme position
   du logo et du burger, avant comme apres. Les deux SEULES choses qui
   changent a `.scrolled` sont l'ombre portee et l'opacite du fond.
   C'est donc l'OMBRE qui se lisait comme un deplacement : elle apparaissait
   d'un coup sous la barre et epaississait son bord bas, exactement l'effet
   d'un padding qui grandit.
   Deux corrections, aucune sur la geometrie :
     - l'ombre existe TOUJOURS, mais transparente au repos : seule sa couleur
       s'anime, donc plus rien n'« apparait » ;
     - sur mobile le fond devient OPAQUE et le flou est coupe. Un fond a 94 %
       laisse voir le contenu defiler par transparence sous la barre, ce qui
       ajoute son propre mouvement - et `backdrop-filter` est ce qui coute le
       plus cher au defilement sur un telephone. */
.v6-page .v6-nav{
	position:sticky;top:0;z-index:1040;
	background:rgba(var(--v6-creme-rgb),.94);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
	border-bottom:1px solid var(--v6-line);
	box-shadow:0 6px 24px rgba(var(--v6-bleu-rgb),0);
	transition:box-shadow .3s ease,background-color .3s ease;
}
.v6-page .v6-nav.scrolled{background:rgba(var(--v6-creme-rgb),.985);box-shadow:0 6px 24px rgba(var(--v6-bleu-rgb),.07)}
@media(max-width:991.98px){
	.v6-page .v6-nav,
	.v6-page .v6-nav.scrolled{
		background:rgba(var(--v6-creme-rgb),1);
		-webkit-backdrop-filter:none;backdrop-filter:none;
	}
}
.v6-barre{display:flex;align-items:center;gap:1rem;padding:.7rem 0}

.v6-menu{display:flex;align-items:center;list-style:none;margin:0 0 0 1.25rem;padding:0}
/* Une SEULE marge automatique dans la barre, ici : deux (une sur le menu, une
   sur les icones) se partageraient l'espace libre et recentreraient le menu. */
.v6-nav-icons{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:0 0 auto}
/* Le bouton de devis vit entre le menu et les icones : il a besoin de sa
   propre respiration et de ne jamais se comprimer. */
.v6-nav-cta{flex:0 0 auto;margin-left:1rem}
.v6-nav-cta .v6-ico{width:1.05rem;height:1.05rem}

/* --------------------------------------------------------------------------
   LE REFLET DU BOUTON DE DEVIS
   ----------------------------------------------------------------------
   🔴 CE QUI PRECEDAIT ETAIT UN DEFAUT DE RENDU, PAS UNE QUESTION DE GOUT.
   L'ancienne version animait le `box-shadow` (opacite et rayon de flou).
   `box-shadow` n'est PAS une propriete composee : chaque image force un
   REPEINT. Et ce bouton vit dans `#mainNav`, qui porte un
   `backdrop-filter: blur(10px)` : repeindre un enfant oblige le navigateur a
   recalculer le flou du fond derriere, soixante fois par seconde. C'est
   exactement ce que Stephane a decrit - « ca scintille en arriere-plan ».
   Le halo ne scintillait pas : c'est le FOND FLOUTE qui vibrait derriere lui.

   ⛔ DANS UNE BARRE FLOUTEE, ON N'ANIME QUE `transform` ET `opacity`. Ce sont
   les deux seules proprietes que le compositeur traite sans repeindre. Toute
   autre - ombre, couleur, filtre, bordure - rallume le pipeline de peinture
   et fait vibrer le `backdrop-filter`.

   CE QUI REMPLACE : un REFLET. Une bande de lumiere etroite et inclinee
   traverse le bouton, une fois toutes les sept secondes, puis se range. Ce
   n'est pas un bouton qui respire - c'est une lumiere qui passe sur une
   surface. La charte est faite d'aplats francs : leur donner un reflet, c'est
   leur donner une matiere, pas un tic nerveux.
     - `transform: translateX()` uniquement -> compose, aucun repeint ;
     - la bande est CLIPPEE par `overflow:hidden` du bouton : elle ne deborde
       jamais dans la barre ;
     - elle passe SOUS le libelle (`>span` est en z-index 1) : le texte n'est
       jamais voile ;
     - `::before` reste au balayage du survol, le reflet prend `::after` : les
       deux gestes ne se marchent pas dessus.
   ⛔ Le reflet S'ARRETE au survol et au focus. C'est le moment ou le balayage
   doit avoir la parole, et une cible qui bouge sous le curseur se clique mal.
   -------------------------------------------------------------------------- */
@keyframes v6-reflet{
	/* 0 -> 72 % : la bande attend hors cadre. 72 -> 100 % : elle traverse.
	   Le temps mort est l'essentiel : sans lui, ca ne dit plus « regarde »,
	   ca dit « publicite ». */
	0%,72%{transform:translateX(-160%) skewX(-14deg)}
	100%  {transform:translateX(360%) skewX(-14deg)}
}
.v6-nav-cta--reflet::after{
	content:"";position:absolute;z-index:0;pointer-events:none;
	top:-40%;bottom:-40%;left:0;width:38%;
	background:linear-gradient(100deg,
		rgba(var(--v6-blanc-rgb),0) 0%,
		rgba(var(--v6-blanc-rgb),.34) 50%,
		rgba(var(--v6-blanc-rgb),0) 100%);
	transform:translateX(-160%) skewX(-14deg);
	will-change:transform;
	animation:v6-reflet 7s cubic-bezier(.4,0,.2,1) infinite;
}
.v6-nav-cta--reflet:hover::after,
.v6-nav-cta--reflet:focus-visible::after{animation-play-state:paused}

/* 🔴 LA VERSION QUI NE SE DEPLACE PAS, pour les postes ou les animations
   systeme sont desactivees - celui de Stephane, pour commencer.
   La bande ne traverse plus : elle se pose au centre et son INTENSITE seule
   respire. `opacity` est, avec `transform`, la seconde propriete composee :
   aucun repeint, donc toujours aucun scintillement du fond floute.
   ⚠ Ce n'est pas un compromis mou : le reglage systeme demande de supprimer
   le MOUVEMENT, pas de rendre l'interface inerte. Une variation d'intensite
   ne declenche aucun trouble vestibulaire. ⛔ Ne pas remettre `animation:none`
   ici : le bouton redeviendrait parfaitement mort chez ceux qui ont ce
   reglage, c'est-a-dire chez plus de monde qu'on ne croit. */
@keyframes v6-reflet-pose{
	0%,100%{opacity:0}
	50%    {opacity:1}
}
/* Les entrees sont `static` : c'est ce qui laisse le panneau se positionner sur
   la BARRE (qui, elle, est positionnee) et donc occuper toute la largeur. */
.v6-menu>li{position:static;display:flex;align-items:center}
.v6-menu>li+li{border-left:1px solid var(--v6-line)}
.v6-menu>li>a,.v6-menu>li>button{
	display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;
	color:var(--v6-texte);font-weight:700;font-size:.95rem;padding:.55rem 1.05rem;position:relative;
	white-space:nowrap;transition:color .25s var(--v6-glisse)}
.v6-menu>li>a::after,.v6-menu>li>button::after{
	content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:-.1rem;height:2px;
	background:rgba(var(--v6-orange-rgb),1);transform:scaleX(0);transform-origin:left;
	transition:transform .25s var(--v6-glisse)}
.v6-menu>li:hover>a::after,
.v6-menu>li:hover>button::after,
.v6-menu>li>a.actif::after{transform:scaleX(1)}
/* SURVOL DES LIENS DE LA BARRE : ORANGE. Demande explicite de Stephane, le
   2026-08-25, apres avoir vu la barre en fonctionnement.
   ⚠️ LA MESURE, pour que personne ne la redecouvre : l'orange en TEXTE sur le
   creme de la barre ne donne que 2,81:1, la ou du texte demande 4,5:1. C'est
   la seule entorse a la regle « l'orange est une surface, jamais une lettre »,
   et elle est BORNEE au survol : au repos les libelles sont en --v6-texte
   (11,9:1), donc rien de ce qui se lit en permanence n'est concerne, et le
   filet orange sous le libelle double deja l'information.
   ⛔ Ne pas etendre l'orange en texte au repos, ni foncer l'orange pour
   rattraper le seuil : la charte n'en a qu'un.
   ⛔ PORTEE : les entrees de PREMIER NIVEAU seulement (Tarifs, Acro IA,
   Realisations...). Precise par Stephane le 25/08 : « pas leurs enfants ».
   Les elements des panneaux deroulants gardent leur survol (fond creme, titre
   bleu nuit) et le pied de panneau reste en bleu nuit.

   ⚠️ LA GRAISSE 700 DE LA REGLE CI-DESSUS N'EST PAS UN ORNEMENT : c'est elle
   qui rend l'orange visible. Mesure faite sur les PIXELS RENDUS, libelle
   survole, en 1440 x 1 dpr : a la graisse 600 d'origine, **3,24 % seulement**
   de la surface du libelle etait du #FF611C PUR - tout le reste est de
   l'antialiasing sur le creme, et l'oeil lit cette moyenne delavee, pas la
   couleur. D'ou « ce n'est pas le bon orange » alors que la valeur calculee
   est exactement rgb(255,97,28). En 700 l'encre pure fait **+76 %**.
   ✅ La graisse est posee AU REPOS, pas au survol : le survol ne change donc
   QUE la couleur, et la barre ne bouge pas d'un pixel. La poser au survol
   coutait +0,8 px de largeur, qui decalaient les entrees suivantes.
   ⛔ Essayes et ecartes : `-webkit-font-smoothing:auto` (sans aucun effet, la
   propriete est inoperante hors macOS), `-webkit-text-stroke` (fait BAISSER
   l'orange pur a 0,9 % : il reantialiase le contour, ca floute), la graisse
   800 (trop lourd dans une barre). */
.v6-menu>li:hover>a,.v6-menu>li:hover>button{color:var(--v6-orange)}
.v6-chevron{width:.85rem;height:.85rem;transition:transform .25s ease}
.v6-menu>li:hover .v6-chevron,
.v6-menu>li.v6-force .v6-chevron{transform:rotate(180deg)}

.v6-mega{
	position:absolute;top:100%;left:0;width:100%;background:rgba(var(--v6-blanc-rgb),1);
	border-top:1px solid var(--v6-line);box-shadow:0 24px 40px rgba(var(--v6-bleu-rgb),.13);
	opacity:0;visibility:hidden;transform:translateY(-10px);
	transition:opacity .28s var(--v6-glisse),transform .28s var(--v6-glisse),visibility 0s .28s;
	z-index:1039}
.v6-a-mega:hover>.v6-mega,
.v6-a-mega:focus-within>.v6-mega,
.v6-a-mega.v6-force>.v6-mega{
	opacity:1;visibility:visible;transform:translateY(0);
	transition:opacity .28s var(--v6-glisse),transform .28s var(--v6-glisse),visibility 0s}
/* 🔴 LE VERROU D'ECHAP. Doit venir APRES la regle d'ouverture : a
   specificite egale (0,3,0), c'est l'ordre d'ecriture qui tranche, et sans
   cette regle Echap ne fermait rien au clavier (le panneau etait tenu ouvert
   par `:focus-within`, que le script ne pouvait pas defaire). */
.v6-a-mega.v6-ferme>.v6-mega{
	opacity:0;visibility:hidden;transform:translateY(-10px);
	transition:opacity .18s var(--v6-glisse),transform .18s var(--v6-glisse),visibility 0s .18s;
}
.v6-mega__grille{padding:2rem 0 1.4rem}

/* --------------------------------------------------------------------------
   PANNEAU EN DEUX TEMPS (« Boutique ») : rubriques a gauche, deux derniers
   produits a droite. Le but est de CASSER la rangee de quatre colonnes
   identiques, qui finissait par rendre tous les panneaux interchangeables.
   ⚠️ Le filet de separation est une BORDURE DE COLONNE, pas un element : il
   doit donc changer de cote quand la grille se replie sous 992 px, sinon il
   reste plante verticalement au milieu d'un empilement.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   PANNEAU EN GROUPES TITRES (« Solutions ») : deux RANGEES de quatre, chacune
   sous son intitule, plutot que huit entrees en vrac ou deux colonnes etroites.
   Le panneau fait toute la largeur de l'ecran : autant s'en servir.
   ⚠️ Le filet separe les groupes SANS marge negative ni bordure sur une colonne
   Bootstrap - c'est une bordure sur le groupe lui-meme, qui n'entre dans aucun
   calcul de largeur (voir le piege de la vitrine boutique).
   -------------------------------------------------------------------------- */
.v6-mega__groupes{display:flex;flex-direction:column;gap:1.5rem}
.v6-mega__groupe + .v6-mega__groupe{padding-top:1.4rem;border-top:1px solid var(--v6-line)}
.v6-mega__groupe .v6-mega__surtitre{display:block;margin-bottom:.7rem}

.v6-mega__pile{display:flex;flex-direction:column;gap:.15rem;padding-right:2rem}
/* 🔴 PAS DE `margin-left` SUR UNE COLONNE BOOTSTRAP. Premiere version :
   `col-lg-5` + `margin-left:1.6rem` -> 41,67 % + 1,6 rem depassent les 100 %
   de la rangee, et la colonne PASSE A LA LIGNE. A l'ecran, la vitrine se
   retrouvait sous les rubriques avec la moitie droite du panneau vide.
   Le `padding` fait le meme travail sans ce risque : les colonnes Bootstrap
   sont en `box-sizing:border-box`, il se prend DANS la largeur. */
.v6-mega__vitrine{
	display:flex;flex-direction:column;gap:.35rem;
	padding-left:2rem;
	border-left:1px solid var(--v6-line);
}
.v6-mega__surtitre{
	font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	color:var(--v6-doux);margin-bottom:.35rem;
}
/* Intitule de groupe dans le menu MOBILE : sans lui, huit entrees d'affilee
   sur un ecran de telephone forment un mur. ⛔ C'est un <li> sans lien : il ne
   doit pas etre tabulable ni ressembler a une destination. */
.v6-page .v6-mm__groupe{
	padding:.9rem 0 .35rem 1rem;
	font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	color:var(--v6-doux);border-left:2px solid transparent;
}
.v6-page .v6-mm__groupe:first-child{padding-top:.35rem}
.v6-mega__produit{
	display:flex;align-items:center;gap:.85rem;padding:.6rem;
	border-radius:var(--v6-r);transition:background .2s ease;
}
.v6-mega__produit:hover{background:rgba(var(--v6-creme-rgb),1)}
/* ⚠ Les visuels de `images/produits/medium/` sont CARRES (400x400) : un cadre
   1/1 est le seul qui ne les rogne pas. Le `flex:0 0 auto` est le meme
   correctif que sur les pastilles - sans lui l'image se comprime des que le
   nom du produit est long. */
.v6-mega__produit img,
.v6-mega__produit-vide{
	width:56px;height:56px;flex:0 0 auto;border-radius:10px;object-fit:cover;
	background:rgba(var(--v6-creme-rgb),1);box-shadow:inset 0 0 0 1px var(--v6-line);
}
.v6-mega__produit-vide{display:inline-flex;align-items:center;justify-content:center;color:var(--v6-doux)}
.v6-mega__produit-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
/* ⚠ Deux lignes maximum : un nom de produit long faisait grandir le panneau
   entier, et donc sauter la mise en page au survol. */
.v6-mega__produit-nom{
	font-size:.88rem;font-weight:700;color:var(--v6-bleu);line-height:1.25;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.v6-mega__produit-prix{font-size:.9rem;font-weight:800;color:var(--v6-bleu)}
.v6-mega__produit-prix small{font-size:.68rem;font-weight:600;color:var(--v6-doux)}
.v6-mega__produit:hover .v6-mega__produit-nom{color:var(--v6-bleu)}

@media(max-width:991.98px){
	.v6-mega__pile{padding-right:0}
	.v6-mega__vitrine{
		padding-left:0;border-left:0;
		padding-top:1.2rem;margin-top:1.2rem;border-top:1px solid var(--v6-line);
	}
}
.v6-mega__item{display:flex;gap:.9rem;padding:.85rem;border-radius:var(--v6-r);
	transition:background .2s ease;height:100%}
.v6-mega__item:hover{background:rgba(var(--v6-creme-rgb),1)}
/* Un <span> et non un <h3> : ces intitules sont des libelles de navigation, et
   une cascade de titres dans la barre casserait l'ordre des niveaux de la
   page (h1 du hero precede par des h3 de menu). */
.v6-mega__titre{display:block;font-size:1rem;font-weight:700;line-height:1.25;
	margin:0 0 .15rem;color:var(--v6-bleu);letter-spacing:-.015em}
.v6-mega__item p{font-size:.87rem;color:var(--v6-doux);margin:0;line-height:1.45}
.v6-mega__pied{background:rgba(var(--v6-creme-rgb),1);border-top:1px solid var(--v6-line);padding:.9rem 0;font-size:.9rem}
/* ⚠️ Les liens de pied etaient en `--v6-doux` : 4,92:1 sur le creme, donc
   conformes, mais visuellement effaces au point de passer pour du texte
   d'ambiance. Ils passent en BLEU NUIT (14,31:1) et prennent un picto orange
   - un picto sur le creme tiendrait 2,81:1, il est donc pose sur une
   PASTILLE BLANCHE ou il remonte a 3,01:1. */
.v6-mega__pied a{color:var(--v6-bleu);font-weight:700;margin-right:1.6rem;
	display:inline-flex;align-items:center;gap:.45rem}
.v6-mega__pied .v6-ico{
	width:1.5rem;height:1.5rem;padding:.28rem;flex:0 0 auto;
	color:var(--v6-orange);background:rgba(var(--v6-blanc-rgb),1);
	border-radius:6px;box-shadow:inset 0 0 0 1px var(--v6-line);
	transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.v6-mega__pied a:hover{color:var(--v6-bleu)}
.v6-mega__pied a:hover .v6-ico{
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-orange);
	box-shadow:inset 0 0 0 1px rgba(var(--v6-bleu-rgb),1);
}
/* La rangee doit pouvoir passer a la ligne : six liens a picto ne tiennent
   pas sur une ligne sous 1400 px. */
.v6-mega__pied .container{display:flex;flex-wrap:wrap;gap:.35rem 0}

/* ⛔ `.v6-tel` a ete SUPPRIME le 2026-08-25 : le telephone ne figure plus dans
   la barre (voir php/header.php). Le numero reste sur /contact et au pied
   de page. Ne pas remettre de regle ici sans remettre le marquage. */

/* Le menu de bureau disparait sous 1200 px : en dessous, c'est le menu plein
   ecran du site qui prend le relais (section 6). */
@media(max-width:1199.98px){
	.v6-menu{display:none}
	.v6-barre{gap:.5rem}
}

/* ==========================================================================
   LES TROIS PALIERS DE LA BARRE - refondus le 2026-08-25
   ----------------------------------------------------------------------
   Objectif : que la barre SE SUFFISE, pour pouvoir retirer le burger sur un
   poste de bureau. Le facteur limitant n'est pas le gout, c'est la largeur,
   et elle a ete MESUREE :

     viewport      .container   logo+3 ronds+devis   reste pour le menu
     1200-1399     1140 px      ~449 px + burger 54  ~607 px
     >= 1400       1320 px      ~449 px              ~841 px

   Le menu complet (6 entrees) pese ~638 px. Il ne rentre donc PAS sous
   1400 avec le bouton de devis ET le burger. D'ou :

     < 1200   pas de menu de bureau du tout, le burger fait tout le travail
              (regle plus haut : `.v6-menu{display:none}`).
     1200-1399  menu a 5 entrees (« L'agence » s'efface), bouton de devis
              VISIBLE, burger CONSERVE - c'est lui qui donne acces aux pages
              de « L'agence ».
     >= 1400  les 6 entrees, et le burger disparait sur un pointeur fin.

   ⛔ Le bouton de devis ne s'efface PLUS sous 1400 : demande explicite,
   « Tarifs, Demande de devis et Boutique visibles en permanence ». La place
   a ete prise sur le rond « boutique », devenu un doublon de l'entree du
   meme nom, et sur « L'agence ».
   ========================================================================== */
@media(max-width:1399.98px){
	/* ⛔ L'ordre compte : cette regle doit rester AVANT les paliers plus
	   etroits ecrits plus bas dans la feuille (piege des max-width qui se
	   recouvrent). */
	/* ⚠ `.v6-menu>li` pose `display:flex` avec une specificite de (0,1,1) :
	   un simple `.v6-a-mega--large{display:none}` (0,1,0) NE PASSE PAS. Mesure
	   faite : l'entree restait a 117 px et la barre debordait de 50 px. */
	.v6-menu>li.v6-a-mega--large{display:none}
	.v6-menu>li>a,.v6-menu>li>button{padding-left:.7rem;padding-right:.7rem}
	.v6-menu>li>a::after,.v6-menu>li>button::after{left:.7rem;right:.7rem}

	/* 🔴 CE PALIER A ETE RECALCULE le 25/08, apres le deplacement du bouton de
	   devis entre le menu et les icones. Mesure : la barre depassait son
	   `.container` de 77 px, soit 47 px de debordement de page a 1200 et 7 px a
	   1280 (l'ecart vient des gouttieres, pas d'un comportement different).
	   On rend ces 77 px en resserrant les ecarts. ✅ Le picto du bouton, qui
	   avait d'abord ete efface sur ce palier, est REVENU : le libelle est passe
	   de « Demander un devis » a « Devis gratuit » et a rendu la place a lui
	   seul. Un palier qui n'a plus besoin d'exceptions est un bon palier. */
	.v6-nav-cta{margin-left:.4rem;padding-left:.85rem;padding-right:.85rem}
	.v6-nav-icons{gap:.35rem}
}

/* 🔴 LE BURGER DISPARAIT A PARTIR DE 1400 px, MAIS SEULEMENT SUR UN
   POINTEUR FIN. Le seuil de largeur ne suffit pas : un iPad Pro 12,9" en
   paysage fait 1366 px et une tablette Android peut depasser 1400 - or les
   mega-menus s'ouvrent au survol, et le survol n'existe pas au doigt. Le
   script du header rattrape le tactile en ouvrant au clic, mais on ne parie
   pas la navigation entiere sur ce rattrapage : `hover: hover` et
   `pointer: fine` decrivent exactement « une vraie souris », et c'est la
   seule condition ou l'on peut se passer du burger.
   ⛔ Ne jamais remplacer cette condition par une simple largeur. */
@media (min-width:1400px) and (hover:hover) and (pointer:fine){
	.v6-page .v6-nav .menu-btn{display:none}
}

/* ==========================================================================
   6. COMPOSANTS CONSERVES DU SITE, REPEINTS EN CLAIR
   Le marquage et le JS ne bougent pas (php/js.php cible #mainNav, #menuToggle,
   #fullMenu, #acrSearchToggle, #acrSearchOverlay) : seules les couleurs, qui
   etaient calibrees pour la navbar sombre, sont reprises ici.
   Le MENU PLEIN ECRAN est passe a la charte le 2026-08-25 (section 6 bis) :
   il n'est plus quasi-noir, il est CREME - le fond de la page. Le PANNEAU DE
   RECHERCHE, lui, est encore sur l'ancienne palette : c'est le dernier
   composant sombre hors charte.
   ========================================================================== */
.v6-page .nav-shop{
	background:rgba(var(--v6-bleu-rgb),.06);
	color:var(--v6-bleu);
}
/* ⚠️ Aplat BLEU NUIT et picto blanc. La peche + picto orange d'avant ne
   donnait que 2,52:1, sous le seuil de 3:1 des graphismes. */
.v6-page .nav-shop:hover{
	background:rgba(var(--v6-bleu-rgb),1);
	color:var(--v6-blanc);
	box-shadow:0 6px 16px rgba(var(--v6-bleu-rgb),.22);
}
.v6-page .nav-shop.active{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}
.v6-page .menu-btn{background:rgba(var(--v6-bleu-rgb),.06)}
.v6-page .menu-btn:hover{background:rgba(var(--v6-bleu-rgb),.12)}
.v6-page .menu-btn span{background:rgba(var(--v6-bleu-rgb),1)}
/* ⛔ L'ETAT « MENU OUVERT » DU BURGER EST DECRIT EN SECTION 6 BIS, ET NULLE
   PART AILLEURS. Il y avait ici une regle qui reblanchissait les trois traits,
   heritee de l'epoque ou le panneau etait sombre : elle est fausse depuis que
   le panneau est creme, et elle n'etait masquee que par le `!important` de la
   6 bis. Une regle fausse mais neutralisee reste un piege. */
/* theme.css escamote deja .navbar-brand, .nav-desktop, .nav-shop et la loupe
   quand le menu plein ecran s'ouvre. Le bouton de devis est propre a cette
   charte : il doit suivre la meme regle, sinon il reste pose au-dessus du
   panneau. */
.v6-page.menu-open .v6-nav .v6-nav-cta{opacity:0;visibility:hidden;pointer-events:none}

/* ↺ LA RECHERCHE REDEVIENT UNE PILULE A PARTIR DE 1200 px.
   Elle avait ete ramenee a un rond le 24/08, et la raison etait bonne :
   mesuree a 168 px, la pilule faisait deborder la barre a TOUTES les
   largeurs. Ce n'est plus le cas - la refonte du menu a rendu de la place
   (« Solutions » au lieu de « Creation de sites », Acro IA retire, le rond
   « boutique » supprime). On rend donc a la recherche sa presentation
   d'origine : loupe + libelle + la touche « / », qui fait decouvrir le
   raccourci sans une ligne d'aide.
   ⚠️ C'est `recherche.css` qui la dessine, avec SES jetons - deja reassignes
   a la charte en section 6 ter. Il n'y a donc rien a repeindre ici : la
   pilule sort blanche, bordee de --v6-line, libelle en --v6-doux.
   ⛔ Avant de rallonger un libelle de menu ou de remettre une entree, passer
   la sonde de largeur : c'est cette pilule qui saute en premier. */

/* ⚠️ DE L'AIR AUX DEUX BOUTS DE LA BARRE MOBILE. Le `.container` de Bootstrap
   ne laisse que 12 px de chaque cote sous 576 px. Le logotype est du TEXTE :
   ses lettres respirent d'elles-memes. Le burger est un DISQUE PLEIN : son
   bord touche la marge, et il se lit « colle au bord » alors que la mesure
   donne 12 px des deux cotes. On passe les deux a 18 px : l'ecart optique se
   referme sans casser la symetrie. */
@media(max-width:575.98px){
	.v6-page .v6-nav > .container{padding-left:18px;padding-right:18px}
	.v6-nav-icons{gap:.35rem}
}

/* Pastille du panier (php/header.php la posait en attribut style ; ici tout le
   style vit dans la feuille). */
.v6-page .acr-panier-pastille{
	position:absolute;top:-6px;right:-8px;font-size:10px;border-radius:10px;
}

/* Lien d'evitement : theme.css le dessine en fluo sur fond sombre. */
.v6-page .acr-skip-link{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}

/* Bouton « retour en haut », repris du site et remis a la charte. */
.v6-page .scroll-top{
	background:rgba(var(--v6-bleu-rgb),1);
	color:var(--v6-blanc);
	border:0;
	box-shadow:0 10px 26px rgba(var(--v6-bleu-rgb),.28);
}
.v6-page .scroll-top:hover{background:rgba(var(--v6-orange-rgb),1)}

/* ==========================================================================
   6 bis. LE MENU PLEIN ECRAN (#fullMenu), REPEINT A LA CHARTE
   ----------------------------------------------------------------------
   Valide le 2026-08-25 : la charte v6 vaut pour TOUT le site, le panneau ne
   pouvait donc plus garder l'ancienne palette (quasi-noir, halos bleu
   electrique + rouge, bouton rouge, survols cyan). Il passe au CREME, le
   fond de la page : le menu n'est pas un lieu a part, c'est la page qui
   s'ouvre. Le reste de la charte suit mecaniquement - texte BLEU NUIT,
   secondaire --v6-doux, cartes et pastilles en BLANC.

   ⚠ RIEN DU MARQUAGE NI DU JS NE BOUGE. php/js.php cible #fullMenu,
   #menuToggle et [data-close] ; theme.css continue de dessiner la geometrie
   (.full-menu-overlay et son ouverture/fermeture). ⚠ Le CONTENU du panneau,
   lui, a ete entierement reecrit le 25/08 : `.menu-link` / `.menu-chip` de
   theme.css ne sont plus utilises, l'interieur est un accordeon `.v6-mm__*`.
   On ne surcharge QUE des
   couleurs, et seulement sous .v6-page : le reste du site garde son menu
   sombre tant que la charte n'y est pas generalisee.

   🔴 CE QUE LE PASSAGE EN CLAIR IMPOSE, ET QUI N'EST PAS UN DETAIL :
   sur le creme, l'orange ne donne que 2,81:1 - SOUS le seuil de 3:1 des
   elements graphiques, alors qu'il tenait 5,09:1 sur le bleu nuit. Deux
   consequences, prises separement :
     - les PASTILLES prennent un fond BLANC, ou leur picto orange tient
       3,01:1. Sur le creme il serait tombe a 2,81:1, et un picto porte
       vraiment de l'information (la coche vaut « inclus »).
     - le FILET des liens, lui, reste orange sur le creme a 2,81:1 -
       arbitrage de Stephane le 25/08, apres avoir vu et refuse le surlignage
       plein. C'est tenable parce qu'il est DECORATIF : le libelle est en
       bleu nuit a 14:1 et la page courante est annoncee par
       `aria-current="page"`, pas par la couleur. ⛔ Ne pas foncer l'orange
       pour « rattraper » le seuil : la charte n'en a qu'un.
   Le geste, lui, ne change pas : c'est toujours le BALAYAGE de la charte
   (scaleX depuis la gauche, .22s), donc il survit a prefers-reduced-motion.
   ========================================================================== */

/* LE FOND. Creme, plus deux halos tres bas qui evitent l'aplat mort d'un
   plein ecran vide.
   ⚠️ Rayons en POURCENTAGE, jamais en rem : l'overlay fait la hauteur du
   viewport, un rayon absolu s'y ferait couper net (voir le halo du heros). */
.v6-page .full-menu-overlay{
	background:
		radial-gradient(72% 55% at 10% 6%,rgba(var(--v6-orange-rgb),.10),transparent 62%),
		radial-gradient(62% 50% at 92% 16%,rgba(var(--v6-bleu-clair-rgb),.16),transparent 58%),
		rgba(var(--v6-creme-rgb),1);
	/* ⛔ `align-items:center` de theme.css centrait un contenu court et le
	   faisait SAUTER a chaque ouverture de rubrique. Le menu se lit du haut. */
	align-items:flex-start;
	overscroll-behavior:contain;
}

/* La colonne du menu. Bornee, pour ne pas s'etaler sur une tablette. */
.v6-page .v6-mm{
	display:flex;flex-direction:column;
	width:100%;max-width:34rem;min-height:100%;
	margin:0 auto;padding:1rem 1.15rem 2.5rem;
}

/* --- La tete : logotype + croix -------------------------------------------
   C'est elle qui permet d'effacer entierement la barre pendant que le menu
   est ouvert. Sans elle, on avait la croix de la barre PAR-DESSUS le panneau,
   et rien pour dire ou l'on se trouve. */
.v6-page .v6-mm__tete{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	padding-bottom:1rem;margin-bottom:.5rem;
	border-bottom:1px solid var(--v6-line);
}
.v6-page .v6-mm__fermer{
	width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;
	background:rgba(var(--v6-bleu-rgb),.06);color:var(--v6-bleu);
	transition:background .2s ease,color .2s ease;
}
.v6-page .v6-mm__fermer:hover{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}
.v6-page .v6-mm__fermer .v6-ico{width:1.35rem;height:1.35rem;stroke-width:2.2}

/* --- L'accordeon ---------------------------------------------------------- */
.v6-page .v6-mm__nav ul{list-style:none;margin:0;padding:0}
.v6-page .v6-mm__nav > ul > li{border-bottom:1px solid var(--v6-line)}
.v6-page .v6-mm__lien{
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	width:100%;padding:.95rem .25rem;
	background:none;border:0;text-align:left;cursor:pointer;
	font-family:inherit;font-size:1.12rem;font-weight:700;line-height:1.25;
	color:var(--v6-bleu);text-decoration:none;
	transition:color .2s ease;
}
.v6-page .v6-mm__lien.is-actif{color:var(--v6-bleu)}
/* ⚠️ Le filet de la page courante est ORANGE et pose a GAUCHE : sur le creme
   l'orange ne tient que 2,81:1, il ne peut donc pas porter l'information a lui
   seul - `aria-current="page"` est dans le marquage, et c'est lui qui la
   porte. Le filet ne fait que la donner a voir. */
.v6-page .v6-mm__lien.is-actif,
.v6-page .v6-mm__item.is-ouvert > .v6-mm__bascule{
	box-shadow:inset .2rem 0 0 -.02rem var(--v6-orange);
	padding-left:.85rem;
}

/* Le « + » qui pivote en « x ». Deux trais en CSS pur : pas de glyphe, donc
   pas de dependance a une fonte, et il tourne proprement. */
.v6-page .v6-mm__plus{
	position:relative;width:1.15rem;height:1.15rem;flex:0 0 auto;
	transition:transform .25s var(--v6-glisse);
}
.v6-page .v6-mm__plus::before,
.v6-page .v6-mm__plus::after{
	content:"";position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;
	background:rgba(var(--v6-orange-rgb),1);border-radius:2px;
}
.v6-page .v6-mm__plus::after{transform:rotate(90deg)}
.v6-page .v6-mm__item.is-ouvert .v6-mm__plus{transform:rotate(135deg)}

/* ⚠️ Pliage par `display`, pas par une hauteur animee : une transition de
   `max-height` demande une valeur devinee, et une rubrique plus longue que la
   devinette se retrouve coupee. Ici rien ne peut etre tronque. */
.v6-page .v6-mm__sous{display:none;padding:0 0 .7rem .85rem !important}
.v6-page .v6-mm__item.is-ouvert > .v6-mm__sous{display:block}
.v6-page .v6-mm__sous li{border-left:2px solid var(--v6-line)}
.v6-page .v6-mm__sous li:first-child{border-top-left-radius:2px}
.v6-page .v6-mm__sous a{
	display:block;padding:.6rem 0 .6rem 1rem;
	font-size:.98rem;font-weight:600;color:var(--v6-texte);text-decoration:none;
	transition:color .2s ease;
}
.v6-page .v6-mm__sous a:hover{color:var(--v6-bleu)}
.v6-page .v6-mm__sous a.is-actif{color:var(--v6-bleu);font-weight:800}
.v6-page .v6-mm__sous li:has(> a.is-actif){border-left-color:var(--v6-orange)}

/* --- Les deux appels, puis les preuves ------------------------------------ */
.v6-page .v6-mm__actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.6rem}
.v6-page .v6-mm__pied{margin-top:auto;padding-top:1.6rem;text-align:center}
/* ⚠️ CONTRASTE RELEVE. L'accroche et les preuves etaient en `--v6-doux`
   (4,93:1 et 5,27:1) : conformes, mais si effacees qu'elles se lisaient comme
   une mention legale. Elles passent en `--v6-texte` (11,9:1 sur blanc) - le
   pied d'un menu n'est pas une note de bas de page, c'est la signature de
   l'agence. */
.v6-page .v6-mm__accroche{
	font-size:.9rem;font-weight:700;color:var(--v6-bleu);margin:0 0 .8rem;
	padding-top:1.2rem;border-top:1px solid var(--v6-line);
}
.v6-page .v6-mm__preuves{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.v6-page .v6-mm__preuves span{
	display:inline-flex;align-items:center;gap:.35rem;
	padding:.4rem .8rem;border-radius:50px;
	background:rgba(var(--v6-blanc-rgb),1);box-shadow:inset 0 0 0 1px var(--v6-line);
	font-size:.8rem;font-weight:600;color:var(--v6-texte);
}
.v6-page .v6-mm__preuves .v6-ico{width:.9rem;height:.9rem;color:var(--v6-orange)}

/* Les reseaux, tout en bas. */
.v6-page .v6-mm__reseaux{display:flex;justify-content:center;gap:.6rem;margin-top:1.4rem}
/* 🔴 VARIANTE CLAIRE OBLIGATOIRE. `.v6-reseau` est cale sur le pied de page,
   qui est BLEU NUIT : fond blanc a 9 % et picto blanc. Pose tel quel sur le
   creme du menu, le fond disparait et le picto devient invisible. La variante
   inverse les deux : carte blanche bordee, picto bleu nuit (15,3:1), et
   l'aplat orange au survol avec le picto en bleu nuit (5,08:1).
   ⛔ Ne pas « factoriser » les deux : ce sont deux fonds opposes. */
.v6-page .v6-reseau--clair{
	background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);
	box-shadow:inset 0 0 0 1px var(--v6-line);
}
/* Meme regle sur le fond creme : le survol remplit en BLEU NUIT et le picto
   passe au BLANC (15,3:1). Un seul comportement de survol pour les deux
   variantes, c'est ce qui rend la regle memorisable. */
.v6-page .v6-reseau--clair:hover{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc);box-shadow:inset 0 0 0 1px rgba(var(--v6-bleu-rgb),1)}

/* --- LA BARRE S'EFFACE PENDANT QUE LE MENU EST OUVERT ---------------------
   🔴 theme.css escamote deja la marque et le menu de bureau, mais laissait le
   burger, qui se retrouvait juste AU-DESSUS de la croix du panneau : deux
   boutons de fermeture superposes, a deux endroits differents. Le panneau
   portant maintenant sa propre tete, la barre entiere s'efface.
   ⛔ Ne pas remettre le burger visible : la fermeture passe par la croix du
   panneau (`[data-close]`, cable par php/js.php) et par Echap. */
.v6-page.menu-open .v6-nav .v6-nav-icons,
.v6-page.menu-open .v6-nav .v6-nav-cta{opacity:0;visibility:hidden;pointer-events:none}
/* 🔴 ET LA BARRE DOIT LAISSER PASSER LES CLICS. Defaut mesure : la croix du
   panneau etait visible, activable au clavier... et INCLIQUABLE a la souris et
   au doigt. theme.css monte `#mainNav` a z-index 2200 quand le menu est
   ouvert - au-dessus du panneau (2100) - et ne coupe les evenements que sur
   son `.container`, pas sur le `<header>` lui-meme. Le header, transparent et
   vide, mangeait donc tous les clics sur toute la hauteur de la barre, c'est
   a dire pile sur la croix.
   ⛔ Ne pas « regler » ca en baissant le z-index de la barre : theme.css le
   pose en `!important` pour le site entier. On coupe les evenements a la
   source, et seulement sous .v6-page. */
.v6-page.menu-open .v6-nav{pointer-events:none}
.v6-page.menu-open #fullMenu{pointer-events:auto}

/* ⛔ Le palier qui forcait le bouton de devis sur sa propre ligne n'a plus
   lieu d'etre : les deux appels du menu mobile sont empiles en colonne
   (`.v6-mm__actions`), il n'y a plus de rangee a enrouler. */

/* ==========================================================================
   6 ter. LE MOTEUR DE RECHERCHE (#acrSearchToggle / #acrSearchOverlay)
   ----------------------------------------------------------------------
   Dernier composant qui vivait encore sur l'ancienne palette (quasi-noir,
   cyan, rouge). Passe a la charte le 2026-08-25.

   ✅ LA BONNE NOUVELLE : assets/css/recherche.css a ete ecrit avec une
   couture faite pour ca. Il ne pose aucune couleur dans ses regles, tout
   passe par ses jetons --acr-s-*. Repeindre la recherche, c'est donc
   REASSIGNER SES JETONS sous .v6-page, sans toucher a son fichier - le
   reste du site garde sa recherche sombre tant que la charte n'y est pas
   generalisee.
   ⚠️ La promesse etait ecrite mais pas tenue : douze valeurs dormaient en
   dur dans ses regles. Elles ont ete remontees en jetons le meme jour, a
   valeur identique (rendu sombre inchange, verifie). Sans ca, du cyan et
   du blanc translucide auraient traverse la charte claire.

   LE PARTI PRIS : le panneau est CREME et tout ce qu'il contient est
   BLANC. C'est la grammaire de la charte - des cartes blanches sur le
   fond creme de la page - appliquee a un panneau flottant. Chaque element
   se detache alors tout seul, sans avoir a inventer de gris.
   ========================================================================== */
.v6-page{
	/* Fonds et surfaces */
	--acr-s-bg:            rgba(var(--v6-bleu-rgb),.42);   /* voile sur la page */
	--acr-s-panel:         rgba(var(--v6-creme-rgb),1);
	--acr-s-field:         rgba(var(--v6-blanc-rgb),1);
	--acr-s-field-focus:   rgba(var(--v6-blanc-rgb),1);
	--acr-s-carte:         rgba(var(--v6-blanc-rgb),1);    /* etiquettes */
	--acr-s-carte-2:       rgba(var(--v6-blanc-rgb),1);    /* tuiles d'acces */
	--acr-s-hover:         rgba(var(--v6-creme-rgb),1);    /* survol d'une option */
	--acr-s-teinte-douce:  rgba(var(--v6-creme-rgb),1);    /* ligne « voir tous » */
	--acr-s-teinte-forte:  rgba(var(--v6-peche-rgb),1);    /* survol d'etiquette */
	--acr-s-close-bg:      rgba(var(--v6-bleu-rgb),.06);
	/* ⚠️ Pastille d'icone : BLEU NUIT a picto orange (5,09:1). La pastille
	   peche a picto orange est bannie par la charte - 2,52:1. */
	--acr-s-teinte:        rgba(var(--v6-bleu-rgb),1);

	/* Traits et accents */
	--acr-s-border:        var(--v6-line);
	--acr-s-border-strong: var(--v6-line);
	--acr-s-accent:        var(--v6-orange);
	--acr-s-accent-2:      var(--v6-bleu);
	--acr-s-ring:          rgba(var(--v6-orange-rgb),.22);
	--acr-s-sur-accent:    var(--v6-bleu);                 /* sur l'orange : 5,08:1 */
	--acr-s-sur-accent-2:  var(--v6-blanc);                /* sur le bleu nuit : 15,3:1 */

	/* Texte */
	--acr-s-text:          var(--v6-bleu);
	--acr-s-text-soft:     var(--v6-texte);
	--acr-s-text-mute:     var(--v6-doux);

	/* Ombres et rayons : le rayon de la charte est plus sobre que celui du
	   module (0,85 rem), on l'aligne. */
	--acr-s-shadow:        0 30px 70px rgba(var(--v6-bleu-rgb),.22);
	--acr-s-shadow-liste:  0 24px 50px rgba(var(--v6-bleu-rgb),.18);
	--acr-s-radius:        var(--v6-r-carte);
	--acr-s-radius-sm:     var(--v6-r);
}

/* ---- Les quelques endroits ou un jeton ne suffit pas ------------------- */

/* Le liseré du panneau etait un degrade accent -> accent 2 (cyan -> rouge).
   La charte n'a qu'un accent : c'est un filet ORANGE, plein. */
.v6-page .acr-search-panel::before{background:rgba(var(--v6-orange-rgb),1)}

/* La liste de suggestions flotte AU-DESSUS du panneau creme : elle doit
   etre blanche, comme un panneau de mega-menu, sinon les deux se confondent.
   (Le jeton --acr-s-panel lui sert de fond par defaut.) */
.v6-page .acr-search-suggest{background:rgba(var(--v6-blanc-rgb),1)}

/* 🔴 DEUX TITRES QUI NE PEUVENT PAS ETRE ORANGE.
   `--acr-s-accent` sert a la fois de SURFACE (bouton d'envoi, filet lateral)
   et de COULEUR DE TEXTE dans ces deux regles-la. En orange, du texte tombe
   a 3,01:1 sur blanc et 2,81:1 sur creme, pour un seuil de 4,5:1. Ils
   repassent donc en bleu nuit - l'orange reste sur les surfaces. */
.v6-page .acr-search-body h3{color:var(--v6-bleu)}
.v6-page .acr-search-suggest li.is-tous{color:var(--v6-bleu)}

/* 🔴 LE FILET LATERAL DE L'OPTION ACTIVE EN BLEU NUIT, pas en orange.
   C'est le seul repere de la ligne parcourue au clavier : il doit se lire
   sans hesitation. Sur le creme du survol, l'orange donnerait 2,81:1 ; le
   bleu nuit en donne 11,4:1. Le fond teinte reste le second signal, la
   regle des deux signaux du module est preservee. */
.v6-page .acr-search-suggest li:hover,
.v6-page .acr-search-suggest li.is-active{
	box-shadow:inset .2rem 0 0 -.02rem var(--v6-bleu);
}

/* Les tuiles sont BLANCHES sur un panneau CREME : leur survol ne peut pas
   etre le creme du jeton --acr-s-hover, elles s'enfonceraient dans le fond
   au lieu de ressortir. Peche + trait orange. */
.v6-page .acr-search-quick a:hover{
	background:rgba(var(--v6-peche-rgb),1);
	border-color:var(--v6-orange);
}

/* Le champ est blanc : la loupe orange y tient 3,01:1, le seuil des
   graphismes. ⛔ Ne pas passer le champ au creme : elle tomberait a 2,81:1. */

/* ---- LE BOUTON D'OUVERTURE DANS LA BARRE -----------------------------
   🔴 UN VRAI DEFAUT TROUVE EN MESURANT, pas en lisant : au survol, a
   partir de 1200 px, l'icone etait BLANCHE SUR PECHE - `.v6-page .nav-shop
   :hover` posait `color:#fff` pour son aplat bleu nuit, et la regle de la
   loupe ne surchargeait QUE le fond. Soit **1,15:1** : la loupe disparaissait
   sous le curseur. Le defaut n'existait qu'au-dessus de 1200 px, la ou
   personne ne regarde le survol d'un rond.

   Corrige et mis a l'orange demande par Stephane, a TOUTES les largeurs (le
   survol d'un bouton n'a aucune raison de dependre d'un palier).
   ⚠️ L'orange en graphisme sur ce fond clair donne 2,79:1, sous le seuil de
   3:1 - meme arbitrage que les liens de la barre. C'est tenable parce que
   l'etat de survol n'est PAS porte par la couleur seule : le fond passe de
   6 % a 12 % de bleu nuit, un changement qui se voit sans distinguer les
   teintes. ⛔ Ne pas retirer ce changement de fond en croyant simplifier. */
.v6-page .v6-nav .acr-search-toggle:hover,
.v6-page .v6-nav .acr-search-toggle:focus-visible{
	background:rgba(var(--v6-bleu-rgb),.12);
	color:var(--v6-orange);
}

/* ==========================================================================
   6 quater. LE BANDEAU DE CONSENTEMENT (tarteaucitron)
   ----------------------------------------------------------------------
   Le dernier. Meme recette que la recherche : assets/css/custom.css est le
   theme tarteaucitron du site et il est entierement tenu par des jetons
   --tac-*. On les REASSIGNE ici, sous .v6-page. Son fichier n'est pas
   touche, le reste du site garde son bandeau sombre.
   ⚠️ Deux jetons ont du y etre AJOUTES le 2026-08-25 (a valeur identique,
   theme sombre inchange) : les deux ombres, qui etaient ses seules valeurs
   en dur, et surtout `--tac-primary-texte`. Ce dernier n'est pas un doublon :
   `--tac-primary` sert a la fois de SURFACE (bouton d'acceptation) et de
   COULEUR DE TEXTE (liens, bouton « Personnaliser »), et la charte v6 ne
   peut pas les traiter pareil - en texte, l'orange tombe a 3,01:1 pour un
   seuil de 4,5:1.

   ⚠️ LE BANDEAU N'EST CHARGE QU'AU PREMIER DEFILEMENT (php/js.php). Pour le
   voir en recette il faut donc defiler, sinon on conclut a tort qu'il a
   disparu.
   ========================================================================== */
.v6-page{
	/* Accent : ORANGE en aplat, BLEU NUIT des qu'il devient une lettre. */
	--tac-primary:          var(--v6-orange);
	--tac-primary-hover:    var(--v6-orange-bas);
	--tac-primary-light:    var(--v6-peche);
	--tac-primary-rgb:      var(--v6-orange-rgb);
	--tac-primary-texte:    var(--v6-bleu);

	/* Surfaces : le bandeau est une CARTE BLANCHE, le panneau de reglages
	   est CREME - la meme grammaire que le reste de la charte. */
	--tac-bg-dark:          rgba(var(--v6-blanc-rgb),1);
	--tac-bg-darker:        rgba(var(--v6-creme-rgb),1);
	--tac-bg-panel:         rgba(var(--v6-creme-rgb),1);
	--tac-bg-hover:         rgba(var(--v6-creme-rgb),1);
	--tac-bg-line:          rgba(var(--v6-bleu-rgb),.04);
	--tac-bg-line-hover:    rgba(var(--v6-bleu-rgb),.07);
	--tac-overlay:          rgba(var(--v6-bleu-rgb),.42);

	/* Texte et traits */
	--tac-text-primary:     var(--v6-bleu);
	--tac-text-secondary:   var(--v6-texte);
	--tac-text-muted:       var(--v6-doux);
	--tac-border:           var(--v6-line);
	--tac-border-light:     var(--v6-line);

	/* Ombres et rayons alignes sur la charte */
	--tac-ombre-bandeau:    0 -4px 30px rgba(var(--v6-bleu-rgb),.16);
	--tac-ombre-flottante:  0 18px 40px rgba(var(--v6-bleu-rgb),.20);
	--tac-radius-md:        var(--v6-r);
	--tac-radius-lg:        var(--v6-r-carte);

	/* Pastille de gestion, en bas a gauche. ⚠ Elle puisait directement dans
	   theme.css : sur fond clair elle restait bleu pale sur blanc, illisible.
	   Elle passe en aplat BLEU NUIT a libelle blanc, comme les ronds de la
	   barre. */
	--tac-manager-bg:       rgba(var(--v6-bleu-rgb),1);
	--tac-manager-bg-hover: rgba(var(--v6-bleu-2-rgb),1);
	--tac-manager-text:     var(--v6-blanc);
}

/* 🔴 LE LIEN DU BANDEAU DEVENAIT INVISIBLE. `#tarteaucitronRoot a` n'a pas
   de soulignement (`text-decoration:none`) : sur le theme sombre il se
   distinguait par sa couleur bleue sur du texte clair. Passe en bleu nuit
   pour le contraste, il devenait identique au texte courant - un lien
   reconnaissable ni a la couleur, ni au soulignement, donc plus un lien du
   tout. Il reprend le traitement editorial de la charte : libelle bleu nuit,
   SOULIGNEMENT ORANGE. */
.v6-page #tarteaucitronRoot a{
	text-decoration:underline;
	text-decoration-color:var(--v6-orange);
	text-decoration-thickness:2px;
	text-underline-offset:2px;
}

/* ==========================================================================
   7. SECTIONS - socle commun
   ========================================================================== */
/* -------------------------------------------------------------------------
   LES FONDS. Trois valeurs, pas quatre - releve fait sur o2switch.fr, la
   reference de la charte :
     CREME #FAF7F1   le fond de la page. Une section sans classe de fond est
                     donc deja dans le ton : c'est le cas par defaut.
     BLANC #FFFFFF   la coupe calme, pleine largeur.
     ORANGE #FF611C  la coupe forte, pleine largeur. Une seule dans la page,
                     sur la bande commerciale.
   ⛔ Le beige #F3EDE3 qui servait de « lavis » a ete SUPPRIME : il n'existe
   nulle part dans la charte, ni dans le logo, ni chez o2switch. C'etait une
   quatrieme couleur inventee, et elle se voyait.
   ⚠️ La bande ORANGE est en #FF611C et tout son texte est en BLEU NUIT
   (5,08:1). Le blanc y tomberait a 3,01:1.
   ------------------------------------------------------------------------- */
/* ⚠️ `position:relative` : `.section-dark`, qu'elle remplace, le portait, et
   plusieurs sections y posent des halos ou des etiquettes en absolu. Sans lui,
   ils se calent sur le premier ancetre positionne - c'est-a-dire la page. */
.v6-sec{padding:5.5rem 0;position:relative}
.v6-sec-sm{padding:3.5rem 0}
.v6-sec-blanc{background:rgba(var(--v6-blanc-rgb),1)}
/* Degrade autorise sur les FONDS DE SECTION (pas sur les boutons). Il est
   BORNE : navy sur #FF6E2E = 5,4:1, navy sur #F25A15 = 4,55:1. Les deux
   extremes passent donc AA. ⛔ Ne pas foncer au-dela de #F25A15 : a #E2500F
   on tombe a 3,92:1. */
/* -------- LA COUPE ORANGE, pleine largeur --------
   Elle ferme la page : l'appel final. Degrade autorise sur un FOND DE SECTION
   (jamais sur un bouton), et BORNE : bleu nuit sur #FF6E2E = 5,4:1, sur
   #F25A15 = 4,55:1. Les deux extremes passent AA. ⛔ Pas plus fonce que
   #F25A15 : a #E2500F on tombe a 3,92:1.
   ⚠️ Tout le texte y est en BLEU NUIT. Le blanc n'y donnerait que 3,01:1. */
.v6-sec-orange{background:linear-gradient(168deg,var(--v6-orange-haut) 0%,rgba(var(--v6-orange-rgb),1) 46%,var(--v6-orange-bas) 100%)}
.v6-sec-orange h2,
.v6-sec-orange h3,
.v6-sec-orange p,
.v6-sec-orange .v6-lead{color:var(--v6-bleu)}
.v6-sec-orange .v6-kicker{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}

/* -------- LA COUPE BLEU NUIT, pleine largeur --------
   Elle porte la boutique. Le contraste y est le plus confortable de la page :
   blanc sur bleu nuit = 15,3:1. Les cartes produit restent blanches, elles se
   detachent d'autant mieux. */
.v6-sec-nuit{background:rgba(var(--v6-bleu-rgb),1)}
.v6-sec-nuit h2,
.v6-sec-nuit h3,
.v6-sec-nuit p,
.v6-sec-nuit .v6-lead{color:var(--v6-blanc)}
.v6-sec-nuit .v6-lead{color:var(--v6-bleu-clair);opacity:1}
.v6-sec-nuit .v6-kicker{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}
/* ⚠️ Libelle BLEU NUIT sur la pastille peche : 12,9:1. L'orange de texte
   #D2450A n'y atteint que 3,85:1 (il faudrait descendre a #BF3A07, une brique
   qui n'est plus l'orange de la marque). La peche porte la chaleur, le bleu
   nuit porte la lecture - c'est la meme regle que sur les surfaces oranges.
   Les PICTOGRAMMES, eux, restent orange : 3,85:1 suffit pour un graphisme
   (WCAG 1.4.11 demande 3:1), pas pour du texte. */
.v6-kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;
	text-transform:uppercase;color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	padding:.4rem .9rem;border-radius:var(--v6-r);margin-bottom:1rem}
/* PALIER TELEPHONE. Taille arretee par Stephane le 2026-08-25.
   Mesure qui la justifie : en 12,48 px, la pastille la plus longue
   (« On developpe du sur-mesure, et pour vous ») passe sur DEUX lignes des
   390 px de large - 34 px de haut deviennent 55 px, et une pastille sur deux
   lignes ne se lit plus comme une pastille. A .58 rem elle tient sur une
   ligne jusqu'en 320 px.
   ⚠️ 9,28 px : c'est petit. Acceptable ici parce que la pastille est un
   SURTITRE decoratif - le titre de section juste dessous porte la meme
   information a 1,85 rem. ⛔ Ne pas descendre plus bas, et ne pas reutiliser
   cette taille pour du texte qui informe. */
@media(max-width:575.98px){
	.v6-kicker{font-size:.58rem;letter-spacing:.12em;padding:.35rem .75rem}
}
.v6-lead{color:var(--v6-doux);font-size:1.08rem;max-width:62ch}
.v6-lead-c{margin-left:auto;margin-right:auto}
/* Or fonce sur les fonds clairs (le #B8790A precedent tombait a 3,63:1),
   or clair sur le bleu nuit ou il donne 8:1. */
/* Les etoiles d'avis Google. ↺ Le glyphe ★ a ete remplace par un SVG : il se
   rend differemment sur chaque systeme (jusqu'a l'emoji sur certains Android),
   et un glyphe ne peut pas recevoir a la fois un remplissage et un contour. */
.v6-etoiles{display:inline-flex;align-items:center;gap:.12em;line-height:1;vertical-align:middle}
.v6-etoile{
	width:1em;height:1em;flex:0 0 auto;
	fill:var(--v6-etoile-google);
	stroke:var(--v6-etoile);stroke-width:1.1;stroke-linejoin:round;
	/* ⚠️ `paint-order:stroke fill` : le contour est trace AVANT le remplissage,
	   donc il cercle l'etoile par l'exterieur au lieu de grignoter sa pointe.
	   Sans lui, un trait de 1,1 px mange visiblement les branches. */
	paint-order:stroke fill;
}
/* Sur le bleu nuit, le jaune de Google donne deja 8,96:1 : le contour n'a plus
   de raison d'etre, et il salirait la forme. */
.v6-avis-phare .v6-etoile,
.v6-page .pd-dark .v6-etoile,
.v6-page .of-portfolio .v6-etoile{stroke:none;fill:var(--v6-etoile-google)}
.v6-lien-fleche{font-weight:700;color:var(--v6-bleu);display:inline-flex;align-items:center;
	gap:.35rem;transition:gap .18s ease}
.v6-lien-fleche .v6-ico{color:var(--v6-orange)}
.v6-lien-fleche:hover{gap:.6rem}
/* ⚠️ Variante SUR FOND BLEU NUIT. Le composant est cale sur les fonds clairs
   (libelle bleu nuit) : pose tel quel sur la coupe nuit, il disparaissait.
   Libelle BLANC (15,3:1), fleche ORANGE conservee - un graphisme orange tient
   5,09:1 sur le bleu nuit, contre 2,81:1 sur le creme. */
.v6-sec-nuit .v6-lien-fleche{color:var(--v6-blanc)}
.v6-liste{list-style:none;padding:0;margin:1.4rem 0}
.v6-liste li{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.6rem;font-size:.97rem}
.v6-liste .v6-ico{color:var(--v6-orange);margin-top:.22rem;stroke-width:2.6;width:1.05rem;height:1.05rem}
/* Surface orange, donc libelle BLEU NUIT : 5,08:1. La pastille fait 11,8 px,
   tres loin du seuil « grand texte » : le blanc (3,01:1) y est exclu. */
.v6-etiq{display:inline-block;background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);font-size:.74rem;
	font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem;border-radius:6px}
.v6-etiq--flot{position:absolute;top:-.8rem;left:1.9rem}
/* Variante CENTREE, a cheval sur le bord haut de la carte - meme geste que
   dans le hero, mais au milieu. `translate(-50%,-50%)` la coupe exactement en
   deux : la moitie haute deborde sur le fond de section, la moitie basse est
   dans la carte. `white-space:nowrap` evite qu'elle se casse en deux lignes et
   perde son alignement vertical. */
.v6-etiq--haut{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
	white-space:nowrap;z-index:2}
/* ⚠️ Fond BLEU NUIT et non peche : l'orange vif sur la peche ne donne que
   2,52:1, sous le seuil de 3:1 des graphismes. Sur le bleu nuit il monte a
   5,08:1 - et le contraste sert le picto autant que la norme. */
/* 🔴 `flex:0 0 auto` N'EST PAS UNE PRECAUTION, C'EST LE CORRECTIF D'UN
   DEFAUT MESURE. Dans `.v6-mega__item`, la pastille est un element flex a
   cote d'un bloc de texte : avec le `flex-shrink:1` par defaut, le navigateur
   la COMPRIMAIT pour faire de la place au texte, d'autant plus que le texte
   voisin etait long. Releve du 25/08 sur les panneaux : **0 pastille carree
   sur 19**, des largeurs de 20 a 43 px pour une hauteur toujours a 44 - et
   donc une taille differente d'une colonne a l'autre.
   `align-self:flex-start` complete : sans lui, une pastille dont la hauteur
   redeviendrait `auto` s'etirerait sur toute la rangee (meme piege que les
   pilules dans une carte en colonne). */
.v6-pastille{width:56px;height:56px;border-radius:14px;background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-orange);
	display:inline-flex;align-items:center;justify-content:center;margin-bottom:.85rem;
	flex:0 0 auto;align-self:flex-start}
.v6-pastille .v6-ico{width:1.55rem;height:1.55rem}
.v6-pastille i{font-size:1.5rem;line-height:1}
.v6-pastille--sm{width:44px;height:44px;border-radius:12px;margin:0}
.v6-pastille--sm .v6-ico{width:1.25rem;height:1.25rem}
.v6-pastille--sm i{font-size:1.15rem}

/* ==========================================================================
   8. HERO
   ========================================================================== */
/* ⚠️ RAYONS EN POURCENTAGE, ET CENTRES QUI LAISSENT LA PLACE DE S'ETEINDRE.
   Le halo bleu etait pose `at 2% 92%` avec un rayon de 26rem, soit 416 px
   sous un centre deja a 92 % de la hauteur : il etait encore dense quand la
   boite du hero se terminait, et le navigateur le COUPAIT NET. Resultat, une
   couture horizontale en travers de la page, juste derriere la carte
   « ce qui est inclus », qui donnait l'impression d'un second fond.
   Avec des rayons en %, chaque halo s'eteint DANS sa boite quelle que soit la
   hauteur du hero (qui change avec la largeur et la longueur des textes) :
     - orange : centre a 10 %, transparent des 38 % ;
     - bleu   : centre a 55 %, transparent entre 31 % et 79 %.
   Le bas du hero redevient donc du creme plat, exactement celui du <body> et
   de la section suivante : plus aucune transition visible.
   ⛔ Ne pas repasser les rayons en `rem` : la couture revient des que le hero
   raccourcit. */
.v6-hero{position:relative;padding:4.5rem 0 5rem;background:
	radial-gradient(70% 45% at 80% 10%,rgba(var(--v6-orange-rgb),.16),transparent 62%),
	radial-gradient(55% 40% at 2% 55%,rgba(var(--v6-bleu-rgb),.09),transparent 60%),rgba(var(--v6-creme-rgb),1)}
/* ⚠️ L'accent du titre n'est plus du texte orange (2,81:1 sur le creme, sous
   le seuil de 3:1 des grands textes) : c'est un SURLIGNAGE orange a lettres
   bleu nuit, 5,08:1. La regle de la charte s'applique donc jusqu'au titre, et
   l'orange y gagne meme en presence : c'est un aplat, plus un trait.
   `box-decoration-break:clone` est indispensable : sans lui, un accent qui
   passe a la ligne perd ses arrondis et son calage sur la 2e ligne. */
.v6-hero h1 span{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	padding:0 .16em .04em;border-radius:.1em;
	-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* ⚠️ LA MEME CHOSE, NOMMEE. `\.v6-hero h1 span` ne sert que dans le hero de
   l'accueil ; le surlignage est le geste d'accent de TOUTE la charte, et
   plusieurs pages en ont besoin hors de ce contexte (le portail Support, les
   heros portes par d'autres gabarits). D'ou une classe utilisable partout.
   ⛔ Ne pas ecrire un titre en orange pour « faire ressortir un mot » : sur le
   creme il tombe a 2,81:1, sous le seuil des grands textes. */
.v6-page .v6-surligne{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	padding:0 .16em .04em;border-radius:.1em;
	-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* ⚠️ `--v6-texte` et non `--v6-doux` : le gris doux tient 4,7:1 sur le creme NU,
   mais le hero porte un halo par-dessus - le fond y remonte a #ECEAE5 et le
   rapport tombe a 4,38:1. Meme correction que sur le chapeau des pages
   d'offre. Regle generale : `--v6-doux` n'est admissible que sur un fond NON
   teinte. */
.v6-hero-puces{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.6rem;color:var(--v6-texte);font-size:.95rem}
.v6-hero-puces span{display:inline-flex;align-items:center;gap:.4rem}
.v6-hero-puces .v6-ico{width:1.05rem;height:1.05rem;color:var(--v6-orange);stroke-width:2.4}
.v6-note-google{display:inline-flex;align-items:center;gap:.6rem;background:rgba(var(--v6-blanc-rgb),1);
	box-shadow:var(--v6-ombre-s);border:1px solid var(--v6-line);border-radius:var(--v6-r);
	padding:.5rem 1rem;font-size:.9rem;font-weight:700;color:var(--v6-bleu)}
.v6-carte-offre{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	padding:2rem 1.9rem;box-shadow:var(--v6-ombre);position:relative}
/* <h2> et non <h3> : le hero porte le <h1>, un <h3> juste apres sauterait un
   niveau. La taille reste celle d'un titre de carte. */
.v6-carte-offre__titre{font-size:1.18rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.25rem}
.v6-prix{display:flex;align-items:flex-end;gap:.5rem;margin:.6rem 0 .1rem}
.v6-prix strong{font-size:3rem;font-weight:800;line-height:1;color:var(--v6-bleu);letter-spacing:-.04em}
.v6-prix em{font-style:normal;color:var(--v6-doux);font-size:.95rem;padding-bottom:.35rem}
.v6-mention{font-size:.85rem;color:var(--v6-doux)}

/* ==========================================================================
   9. BANDE « CE QUI EST INCLUS » - chevauche le hero
   ========================================================================== */
/* ⚠️ `display:flow-root` sur la SECTION, et c'est tout l'enjeu du bloc.
   Sans lui, la marge negative de la carte ne la fait pas monter SUR le hero :
   elle FUSIONNE avec la marge de la section (fusion des marges verticales) et
   c'est la section entiere, fond blanc compris, qui remonte de 51 px. Le
   resultat visuel est l'inverse de l'effet recherche : le blanc mange le bas
   du hero au lieu que la carte flotte au-dessus du creme.
   `flow-root` ouvre un contexte de formatage : la section reste ou elle est,
   la carte seule remonte. Mesure : hero bas 787 px, haut de carte 736 px. */
/* ⚠️ FOND BLANC OBLIGATOIRE. C'est lui la moitie basse du chevauchement : la
   carte remonte de 51 px sur le creme du hero, et sa moitie basse repose sur
   le blanc du contenu. Retirer ce fond (essaye le 24/08) fait flotter la
   carte dans du creme uniforme : le chevauchement existe toujours dans le
   calcul, mais plus rien ne le donne a voir.
   Pas de padding-bas : la section suivante est blanche elle aussi et apporte
   deja ses 5,5 rem. */
.v6-inclus-sec{display:flow-root;background:rgba(var(--v6-blanc-rgb),1)}
.v6-inclus{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	box-shadow:var(--v6-ombre);padding:2.2rem 1.4rem;margin-top:-3.2rem;position:relative;z-index:2}
.v6-inclus__item{text-align:center;padding:.75rem .5rem}
.v6-inclus__item h3{font-size:.98rem;margin:0}
.v6-inclus__item p{font-size:.86rem;color:var(--v6-doux);margin:.25rem 0 0}

/* ==========================================================================
   10. CARTES - realisations et metiers
   ========================================================================== */
.v6-carte{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	box-shadow:var(--v6-ombre-s);height:100%;overflow:hidden;
	transition:transform .18s ease,box-shadow .18s ease}
.v6-carte:hover{transform:translateY(-4px);box-shadow:var(--v6-ombre)}
.v6-carte__corps{padding:1.5rem 1.5rem 1.6rem}
.v6-carte__corps p{color:var(--v6-doux);font-size:.96rem}
.v6-real__img{aspect-ratio:16/10;background:rgba(var(--v6-creme-rgb),1);overflow:hidden;display:flex;
	align-items:center;justify-content:center;color:var(--v6-bleu);font-weight:700}
.v6-real__img img{width:100%;height:100%;object-fit:cover;object-position:top center;
	transition:transform .4s ease}
.v6-carte:hover .v6-real__img img{transform:scale(1.05)}
.v6-real__meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;
	padding:1rem 1.25rem 1.2rem}
.v6-real__meta h3{font-size:1.02rem;margin:0}
.v6-etiq-plate{font-size:.74rem;font-weight:700;color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	padding:.25rem .6rem;border-radius:6px;white-space:nowrap}
/* ==========================================================================
   LES QUATRE METIERS, EN ONGLETS
   Quatre cartes empilees prenaient 800 px de haut pour un contenu dont chaque
   visiteur ne lit qu'un quart : celui de SON metier. Les onglets ramenent la
   section a un ecran et rendent le choix explicite.
   ⚠️ Le masquage des panneaux inactifs est porte par l'attribut HTML `hidden`,
   pas par une classe CSS : c'est ce qui les retire aussi de l'arbre
   d'accessibilite et de la recherche dans la page. ⛔ Ne pas le remplacer par
   `display:none` sur `.v6-panneau:not(.is-actif)`, le HTML deviendrait
   muet sur l'etat reel.
   ========================================================================== */
/* ⚠️ `minmax(0,1fr)` et pas `1fr`. Une piste de grille en `1fr` vaut en
   realite `minmax(auto,1fr)` : elle refuse de descendre sous la largeur de son
   contenu. La rangee d'onglets deroulante (864 px de contenu) faisait donc
   deborder toute la page de 21 px en 360. Mesure a l'appui. */
.v6-metiers{display:grid;gap:1.5rem;align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:992px){.v6-metiers{grid-template-columns:19rem minmax(0,1fr)}}

/* -------- La colonne d'onglets -------- */
.v6-metiers__onglets{display:grid;gap:.6rem}
.v6-onglet{
	display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	padding:.9rem 1rem;cursor:pointer;
	transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.v6-onglet:hover{border-color:var(--v6-bleu);transform:translateX(2px)}
.v6-onglet__ico{
	width:2.75rem;height:2.75rem;flex:0 0 auto;border-radius:12px;
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-orange);
	display:flex;align-items:center;justify-content:center;font-size:1.15rem;
	transition:background .18s ease,color .18s ease;
}
.v6-onglet__txt{display:flex;flex-direction:column;min-width:0}
.v6-onglet__titre{font-weight:700;color:var(--v6-bleu);font-size:1rem;line-height:1.25}
.v6-onglet__sur{font-size:.82rem;color:var(--v6-doux);line-height:1.3}
/* Onglet actif : l'aplat bleu nuit. Le picto s'inverse (fond orange, glyphe
   bleu nuit) pour rester lisible - 5,08:1. */
.v6-onglet.is-actif{background:rgba(var(--v6-bleu-rgb),1);border-color:var(--v6-bleu);transform:none}
.v6-onglet.is-actif .v6-onglet__titre{color:var(--v6-blanc)}
.v6-onglet.is-actif .v6-onglet__sur{color:var(--v6-bleu-clair)}
.v6-onglet.is-actif .v6-onglet__ico{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}

/* -------- Le panneau -------- */
.v6-panneau{
	display:grid;gap:1.75rem;align-items:center;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	box-shadow:var(--v6-ombre-s);padding:1.75rem;
}
@media(min-width:768px){.v6-panneau{grid-template-columns:1fr 17rem}}
.v6-panneau h3{font-size:1.35rem;margin:0 0 .6rem}
.v6-panneau__texte p{color:var(--v6-doux);font-size:.98rem}
.v6-panneau__texte ul{list-style:none;padding:0;margin:1.1rem 0 1.3rem}
.v6-panneau__texte li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;margin-bottom:.55rem}
.v6-panneau__texte li .v6-ico{width:1.05rem;height:1.05rem;color:var(--v6-orange);margin-top:.3rem;stroke-width:2.6}
.v6-panneau__visuel{
	border-radius:var(--v6-r);overflow:hidden;background:rgba(var(--v6-creme-rgb),0);
	display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
}
.v6-panneau__visuel img{width:100%;height:100%;object-fit:contain;padding:.75rem}

/* Emplacement a remplir : il ANNONCE ce qu'il attend plutot que de laisser un
   trou. ⛔ Ne pas le remplacer par une balise <img> vers un fichier absent :
   un visuel manquant doit se voir, et dire quoi fournir. */
.v6-visuel-vide{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
	width:100%;height:100%;padding:1rem;text-align:center;
	background:
		repeating-linear-gradient(-45deg,rgba(var(--v6-bleu-rgb),.045) 0 8px,transparent 8px 16px),
		rgba(var(--v6-creme-rgb),1);
	border:2px dashed var(--v6-line);border-radius:var(--v6-r);
}
.v6-visuel-vide i{font-size:2rem;color:var(--v6-orange)}
.v6-visuel-vide__txt{font-size:.74rem;font-weight:600;color:var(--v6-doux);line-height:1.5}
.v6-visuel-vide code{font-size:.7rem;color:var(--v6-bleu);word-break:break-all}

/* Sous 992 px la colonne d'onglets passe en rangee qui defile : quatre
   onglets empiles avant le contenu, c'est un demi-ecran perdu. */
@media(max-width:991.98px){
	.v6-metiers__onglets{
		grid-auto-flow:column;grid-auto-columns:minmax(13.5rem,1fr);
		overflow-x:auto;scroll-snap-type:x mandatory;
		/* ⚠️ min-width:0 est OBLIGATOIRE. Un element de grille vaut
		   min-width:auto par defaut : il refuse de retrecir sous la largeur de
		   son contenu, donc `overflow-x:auto` ne s'active jamais et la rangee
		   pousse la page (mesure : 21 px de debordement en 360). */
		min-width:0;
		padding-bottom:.35rem;margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem;
		scrollbar-width:thin;
	}
	.v6-onglet{scroll-snap-align:start}
	.v6-onglet:hover{transform:none}
	.v6-panneau{padding:1.35rem}
}

/* ==========================================================================
   11. TARIFS
   ========================================================================== */
.v6-tarif{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	padding:1.9rem 1.6rem;height:100%;display:flex;flex-direction:column;
	box-shadow:var(--v6-ombre-s);transition:transform .18s ease,box-shadow .18s ease}
.v6-tarif:hover{transform:translateY(-4px);box-shadow:var(--v6-ombre)}
.v6-tarif h3{margin-bottom:.3rem}
.v6-tarif__desc{font-size:.92rem;color:var(--v6-doux);min-height:3.2em}
.v6-tarif__prix{font-size:2.1rem;font-weight:800;color:var(--v6-bleu);letter-spacing:-.03em;line-height:1.1}
.v6-tarif__mois{font-size:.86rem;color:var(--v6-doux)}
.v6-tarif .v6-liste{margin:1.2rem 0 1.6rem}
.v6-tarif .v6-liste li{font-size:.93rem}
.v6-tarif .v6-btn{margin-top:auto}
.v6-tarif--phare{background:linear-gradient(165deg,rgba(var(--v6-bleu-2-rgb),1),rgba(var(--v6-bleu-rgb),1));
	border-color:transparent;color:rgba(var(--v6-blanc-rgb),.84);box-shadow:0 20px 45px rgba(var(--v6-bleu-rgb),.28)}
.v6-tarif--phare h3,.v6-tarif--phare .v6-tarif__prix{color:var(--v6-blanc)}
.v6-tarif--phare .v6-tarif__desc,.v6-tarif--phare .v6-tarif__mois{color:var(--v6-bleu-clair)}
.v6-tarif--phare .v6-liste .v6-ico{color:var(--v6-orange)}
/* ⚠️ `align-self:flex-start` : la carte est un conteneur flex en colonne, donc
   ses enfants s'etirent par defaut. Sans cette ligne la pastille occupait
   toute la largeur de la carte et se lisait comme un bandeau de titre, pas
   comme la pilule de la maquette. */
/* ⛔ Plus de pastille DANS le flux : elle decalait le titre du pack phare vers
   le bas et desalignait les quatre cartes. Sortie du flux, les quatre titres
   se retrouvent sur la meme ligne. */
.v6-tarif--phare{position:relative}

/* ==========================================================================
   12. LA BANDE BOUTIQUE : pastille a cheval, slider, carte produit
   ========================================================================== */

/* -------- LE JALON DE SECTION --------
   L'anneau du logo, pose a cheval sur la cesure de deux sections, avec le
   pictogramme de la section en son centre. C'est le repere de rythme de la
   charte : il casse la coupure au lieu de la subir.

   Construction, et pourquoi chaque couche est la :
     - un DISQUE BLANC : c'est lui qui permet au jalon de tenir sur n'importe
       quelle paire de fonds (blanc/orange comme creme/blanc). Sans lui,
       l'anneau orange se perdrait sur la bande orange ;
     - l'ANNEAU, exactement le « o » du logo : haut ouvert, incline a -45 deg ;
     - le PICTOGRAMME, en bleu nuit, qui dit de quoi parle la section.

   ⚠️ L'anneau est un calque SEPARE du pictogramme. Il porte `rotate(-45deg)` :
   si le picto etait dedans, il pencherait avec lui.
   ⚠️ `overflow:visible` sur la section, sinon la moitie haute est rognee.
   ⚠️ `padding-top` majore : la reserve par defaut de `.v6-sec` (5,5 rem) est
   plus courte que la moitie basse du jalon, le titre passait dessous.
   -------------------------------------------------------------------------- */
.v6-sec-pastille{position:relative;overflow:visible;padding-top:7rem}
.v6-jalon{
	position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
	width:7.375rem;height:7.375rem;
	display:grid;place-items:center;border-radius:50%;
	background:rgba(var(--v6-blanc-rgb),1);
	z-index:3;
	/* ⚠️ LA TEINTE EST UNE VARIABLE, et c'est tout l'interet : les cinq nuances
	   (plein, halo, orbital, double, degrade) existent du coup dans les DEUX
	   couleurs sans une seule regle en double. `.v6-jalon--bleu` ne fait que
	   reassigner cette ligne. */
	/* ⚠️ SEULE EXCEPTION a la regle des fonds en rgba() : cet alias sert aussi
	   de `border-color` et de `color` (l'anneau, le pointille, le picto). Le
	   garder en JETON DE COULEUR evite d'avoir a maintenir un second alias en
	   canaux, qui pourrait diverger du premier. */
	--v6-jalon-teinte:var(--v6-orange);
}

/* -------- LA DEUXIEME COULEUR --------
   REGLE DE POSE, dans cet ordre de priorite :
     1. le jalon doit CONTRASTER avec la section la plus coloree qu'il touche.
        Un anneau orange au bord de la coupe orange, ou bleu nuit au bord de
        la coupe bleu nuit, se fond dans la bande - le disque blanc le rend
        lisible, mais la forme se perd ;
     2. entre deux fonds neutres (blanc, creme), il ALTERNE, pour rythmer la
        descente de page.
   Sur la page, les trois contraintes tombent d'elles-memes et donnent un
   systeme lisible : les deux jalons ORANGE encadrent la bande bleu nuit
   (entree et sortie), le dernier jalon BLEU NUIT ouvre la coupe orange.
     metiers   blanc  -> creme   neutre  -> bleu (alternance)
     tarifs    creme  -> blanc   neutre  -> orange (alternance)
     boutique  blanc  -> NUIT    impose  -> orange
     avis      NUIT   -> blanc   impose  -> orange
     FAQ       blanc  -> creme   neutre  -> bleu (alternance)
     appel     creme  -> ORANGE  impose  -> bleu
   Contraste : bleu nuit sur le disque blanc = 15,3:1, tres au large - la
   version bleue n'a aucune des precautions de la version orange. */
.v6-jalon--bleu{--v6-jalon-teinte:var(--v6-bleu)}
/* NUANCE PAR DEFAUT : l'anneau PLEIN, exactement le « o » du logo - haut
   ouvert, incline a -45 deg. C'est la plus fidele a la marque et la plus
   lisible en petit.
   ⚠️ L'anneau tourne, PAS le pictogramme : il est sur un calque a part, sinon
   il pencherait avec lui. */
.v6-jalon__anneau{
	position:absolute;inset:.6875rem;box-sizing:border-box;border-radius:50%;
	border:.75rem solid var(--v6-jalon-teinte);border-top-color:transparent;
	transform:rotate(-45deg);
}

/* -------- LES QUATRE VARIANTES, activables section par section --------
   `v6_jalon('i-panier', 'orbital')` pose `.v6-jalon--orbital`.
   ⛔ Trois nuances ont ete essayees puis ECARTEES - pointille pur, tirets,
   segments : dans les trois, les intervalles sont reguliers, donc la COUPURE
   DU HAUT ne se lit plus. On perd le « o » du logo et il ne reste qu'un cercle
   decoratif. Ne pas les reintroduire sans regler ce point. */

/* 1. HALO - anneau plein cerne d'un second anneau pointille. */
.v6-jalon--halo .v6-jalon__anneau{inset:1.125rem;border-width:.5625rem}
.v6-jalon--halo::before{
	content:"";position:absolute;inset:.1875rem;box-sizing:border-box;border-radius:50%;
	border:.25rem dotted var(--v6-jalon-teinte);border-top-color:transparent;
	transform:rotate(-45deg);opacity:.75;
}

/* 2. ORBITAL - anneau fin, plus un point plein pose DANS la coupure. */
.v6-jalon--orbital .v6-jalon__anneau{border-width:.5625rem}
.v6-jalon--orbital::after{
	content:"";position:absolute;top:.75rem;right:.75rem;
	width:.95rem;height:.95rem;border-radius:50%;background:var(--v6-jalon-teinte);z-index:4;
}

/* 3. DOUBLE FILET - deux traits fins concentriques. */
.v6-jalon--double .v6-jalon__anneau{inset:.5rem;border-style:double;border-width:.875rem}

/* 4. DEGRADE - l'arc s'eteint au lieu de s'arreter net. Le masque evide le
      centre : sans lui on aurait un disque, pas un anneau. */
.v6-jalon--degrade .v6-jalon__anneau{
	border:0;transform:none;
	background:conic-gradient(from 135deg,var(--v6-jalon-teinte) 0deg,var(--v6-jalon-teinte) 250deg,transparent 278deg,transparent 360deg);
	-webkit-mask:radial-gradient(circle,transparent 2.15rem,var(--v6-masque) 2.15rem);
	mask:radial-gradient(circle,transparent 2.15rem,var(--v6-masque) 2.15rem);
}
/* ⚠️ Pictogramme a la TEINTE du jalon, sur le disque blanc. En bleu nuit :
   15,3:1, tres au large. En ORANGE : 3,01:1. C'est un GRAPHISME, dont le seuil
   WCAG est 3:1 - il passe, mais d'un centieme. Deux consequences a ne pas
   perdre de vue pour la version orange :
     - le disque doit rester du BLANC PUR. Sur le creme (#FAF7F1) on tomberait
       a 2,81:1, sous le seuil ;
     - ⛔ ne jamais reprendre cette couleur pour du TEXTE au centre du jalon :
       le seuil passerait a 4,5:1 et l'orange n'y est plus.
   Sans ombre portee, le jalon cesse d'etre un autocollant pose sur la page :
   sur la cesure creme/blanc le disque devient presque invisible et il ne reste
   que l'anneau, qui flotte. C'est voulu. */
.v6-jalon__ico{
	position:relative;color:var(--v6-jalon-teinte);font-size:1.85rem;line-height:1;
}

/* -------- Le slider -------- */
.v6-slider-wrap{position:relative}
.v6-slider{overflow:hidden}
.v6-slider .swiper-slide{height:auto}       /* cartes de hauteur egale */
.v6-slider .swiper-slide>.v6-produit{height:100%}
/* Moins de produits que de places : Swiper verrouille, on recentre la rangee
   au lieu de la laisser collee a gauche. */
.v6-slider-wrap.is-centered .swiper-wrapper{justify-content:center}

/* Barre de commande : fleche, puces, fleche - centree sous le slider. */
/* ⚠️ `flex-wrap` et `max-width` : avec douze avis, la rangee de puces plus les
   deux fleches depassait le conteneur de 21 px en 360 px de large. Les
   sliders utilisent en plus `dynamicBullets`, qui borne le nombre de puces
   visibles quel que soit le nombre de vues. */
.v6-slider-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
	gap:.75rem 1.1rem;margin-top:1.6rem;max-width:100%}
.v6-slider-nav .swiper-pagination-bullets-dynamic{overflow:visible}
.v6-slider-nav .swiper-pagination{position:static;width:auto;display:flex;align-items:center;gap:.4rem}
.v6-slider-nav .swiper-pagination-bullet{
	width:.5rem;height:.5rem;margin:0;background:rgba(var(--v6-blanc-rgb),1);opacity:.45;
	transition:opacity .2s ease,width .2s ease}
.v6-slider-nav .swiper-pagination-bullet-active{opacity:1;width:1.5rem;border-radius:.25rem}

.v6-fleche{
	width:2.75rem;height:2.75rem;border:0;border-radius:50%;flex:0 0 auto;
	background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);
	display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;
	box-shadow:0 8px 20px rgba(var(--v6-bleu-rgb),.20);
	transition:background .2s ease,color .2s ease;
}
.v6-fleche:hover{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}
.v6-fleche.swiper-button-disabled{opacity:.35;pointer-events:none}
.v6-fleche .v6-ico{width:1.15rem;height:1.15rem;stroke-width:2.4}
.v6-fleche--prec .v6-ico{transform:rotate(90deg)}
.v6-fleche--suiv .v6-ico{transform:rotate(-90deg)}

/* -------- La carte produit --------
   La version en grille reduisait le produit a une vignette de 64 px perdue
   dans du vide. Ici la photo occupe toute la largeur de la carte, la
   categorie situe le produit, et l'appel « Voir le produit » rend la carte
   lisible comme un objet cliquable. */
.v6-produit{
	display:flex;flex-direction:column;background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	overflow:hidden;box-shadow:var(--v6-ombre-s);
	transition:transform .18s ease,box-shadow .18s ease;
}
.v6-produit:hover{transform:translateY(-4px);box-shadow:var(--v6-ombre)}
.v6-produit__media{
	/* ⚠️ 1/1 et pas 4/3 : les visuels de `images/produits/medium/` sont tous
	   des CARRES de 400x400. En 4/3 `object-fit:cover` rognait 25 % de la
	   hauteur, haut et bas - le titre imprime dans le visuel du module SAV Pro
	   se retrouvait coupe. En 1/1 le cadrage est exact, sans perte. */
	position:relative;display:block;aspect-ratio:1/1;background:rgba(var(--v6-creme-rgb),1);
	overflow:hidden;border-bottom:1px solid var(--v6-line);
}
.v6-produit__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.v6-produit:hover .v6-produit__media img{transform:scale(1.04)}
.v6-produit__promo{
	position:absolute;top:.6rem;left:.6rem;z-index:1;
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);font-size:.72rem;font-weight:800;
	padding:.2rem .5rem;border-radius:5px;letter-spacing:.03em;
}
.v6-produit__corps{display:flex;flex-direction:column;flex:1 1 auto;padding:1.1rem 1.15rem 1.25rem}
.v6-produit__cat{
	font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
	color:var(--v6-doux);margin-bottom:.35rem;
}
.v6-produit h3{font-size:1rem;margin:0;color:var(--v6-bleu);line-height:1.3}
.v6-produit .v6-px{margin-top:auto;padding-top:.9rem;font-weight:800;color:var(--v6-bleu);font-size:1.1rem}
.v6-produit .v6-px del{color:var(--v6-doux);font-weight:600;font-size:.85rem;margin-left:.4rem}
.v6-produit .v6-px small{color:var(--v6-doux);font-weight:600;font-size:.78rem;margin-left:.25rem}
.v6-produit__plus{
	display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;
	font-size:.88rem;font-weight:700;color:var(--v6-bleu);transition:gap .18s ease;
}
.v6-produit__plus .v6-ico{width:1rem;height:1rem;stroke-width:2.4;color:var(--v6-orange)}
.v6-produit:hover .v6-produit__plus{gap:.65rem}

@media(max-width:575.98px){
	.v6-jalon{width:5.5rem;height:5.5rem}
	.v6-jalon__anneau{inset:.5rem;border-width:.5rem}
	.v6-jalon--halo .v6-jalon__anneau{inset:.8rem;border-width:.4rem}
	.v6-jalon--halo::before{inset:.15rem;border-width:.18rem}
	.v6-jalon--orbital .v6-jalon__anneau{border-width:.4rem}
	.v6-jalon--orbital::after{top:.5rem;right:.5rem;width:.7rem;height:.7rem}
	.v6-jalon--double .v6-jalon__anneau{inset:.35rem;border-width:.625rem}
	.v6-jalon--degrade .v6-jalon__anneau{
		-webkit-mask:radial-gradient(circle,transparent 1.55rem,var(--v6-masque) 1.55rem);
		mask:radial-gradient(circle,transparent 1.55rem,var(--v6-masque) 1.55rem)}
	.v6-jalon__ico{font-size:1.25rem}
	.v6-sec-pastille{padding-top:4.75rem}
}

/* ==========================================================================
   13. AVIS - bandeau qui defile
   Ce qui convainc, c'est le NOMBRE d'avis qui defilent, pas un temoignage mis
   en vitrine. Les cartes sont donc toutes de meme rang.
   ========================================================================== */
.v6-slider-avis .swiper-slide{height:auto}
.v6-slider-avis .swiper-slide>.v6-avis{height:100%}
.v6-avis{
	display:flex;flex-direction:column;margin:0;height:100%;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	box-shadow:var(--v6-ombre-s);padding:1.5rem 1.5rem 1.35rem;
}
/* ⚠️ theme.css habille <blockquote> d'un degrade sombre, d'un filet gauche, de
   2 rem de rembourrage ET d'un guillemet geant en ::before. Sur la carte
   claire, ca donnait un gros aplat gris et un caractere parasite. On remet
   tout a zero, ::before compris - le fond `none` est celui qui manquait. */
.v6-avis blockquote{margin:.75rem 0 1.1rem;padding:0;border:0;background:none;
	font-style:normal;font-size:inherit;line-height:inherit;color:inherit;
	overflow:visible;border-radius:0;flex:1 1 auto}
.v6-avis blockquote::before{content:none}
/* ⚠️ Toutes les cartes d une rangee ont la meme hauteur, donc c est le plus
   long avis qui impose sa taille aux douze : sans borne, on obtenait 250 px de
   vide sous les avis courts. Sept lignes suffisent a convaincre, et l avis
   complet reste sur Google - le bouton est juste en dessous. */
.v6-avis blockquote p{margin:0;font-size:.96rem;color:var(--v6-texte);line-height:1.6;
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.v6-avis blockquote p::before{content:"« "}
.v6-avis blockquote p::after{content:" »"}
.v6-avis__qui{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.v6-avis__qui strong{display:block;font-size:.92rem;color:var(--v6-bleu);line-height:1.3}
.v6-avis__ou{display:block;font-size:.8rem;color:var(--v6-doux)}
/* Initiales : l'avatar sans photo. Bleu nuit sur peche = 12,9:1. */
.v6-avis__init{
	width:2.5rem;height:2.5rem;flex:0 0 auto;border-radius:50%;
	background:rgba(var(--v6-peche-rgb),1);color:var(--v6-bleu);
	display:flex;align-items:center;justify-content:center;
	font-weight:800;font-size:.85rem;letter-spacing:.02em;
}

/* Les fleches et les puces du slider d'avis sont sur fond CLAIR : celles de la
   bande boutique etaient calibrees pour l'orange. */
.v6-slider-avis + .v6-slider-nav .swiper-pagination-bullet{background:rgba(var(--v6-bleu-rgb),1)}
.v6-slider-avis + .v6-slider-nav .v6-fleche{box-shadow:inset 0 0 0 1.5px var(--v6-line),0 6px 16px rgba(var(--v6-bleu-rgb),.10)}

/* --------------------------------------------------------------------------
   VARIANTE `--fleches-cote` : les fleches quittent la rangee du bas et se
   posent sur les COTES du slider. C'est le placement de l'accueil en
   production (`.shop-slider-wrap` d'accueil-claire.css), repris ici le
   2026-08-25 sur demande de Stephane.

   ⚠️ CE PLACEMENT NE TIENT QUE PARCE QU'IL A UN REPLI. En dessous du seuil
   la gouttiere disparait et la fleche mordrait sur la premiere carte : elle
   revient donc PAR-DESSUS, a 4 px du bord.
   ⛔ Ne jamais poser les fleches a l'exterieur sans ce repli.

   🔴 LE SEUIL EST 1440 px, PAS 1400. Calcul, puis mesure : le `.container`
   de Bootstrap plafonne a 1320 px, la gouttiere vaut donc (viewport - 1320)/2.
   Pour loger une fleche a -58 px il faut 58 px de gouttiere, donc un viewport
   d'au moins **1436 px**. A 1400 px la gouttiere ne fait que 40 px : mesure a
   1400 px avec un seuil a 1400 -> **6 px de debordement horizontal**.
   ⚠ L'accueil en production porte ce defaut : son seuil est a 1400 px
   (accueil-claire.css), donc elle deborde entre 1400 et 1435 px.

   🔴 ET LA COULEUR SUIT LE FOND QU'ELLE TOUCHE, pas le composant : dans la
   gouttiere la fleche est sur le fond de section (bleu nuit) -> elle est
   BLANCHE ; par-dessus les cartes, blanches, elle serait invisible -> elle
   passe en BLEU NUIT a chevron blanc. Meme raisonnement que le remplissage
   des boutons.

   ⚠️ Le centrage vertical est MESURE, pas devine : les fleches sont sorties
   du flux, la rangee du bas ne contient donc plus que les puces. `--v6-nav-h`
   est la hauteur qui reste (marge + puces) ; on remonte de sa moitie pour
   retomber sur le centre du slider. Verifie a 2 px pres en 1440 et 1920.
   -------------------------------------------------------------------------- */
@media(min-width:1440px){
	.v6-slider-wrap--fleches-cote{--v6-nav-h:2.1rem}
	.v6-slider-wrap--fleches-cote .v6-fleche{
		position:absolute;
		top:calc(50% - (var(--v6-nav-h) / 2));
		transform:translateY(-50%);
	}
	.v6-slider-wrap--fleches-cote .v6-fleche--prec{left:-58px}
	.v6-slider-wrap--fleches-cote .v6-fleche--suiv{right:-58px}
}
@media(max-width:1439.98px){
	.v6-slider-wrap--fleches-cote{--v6-nav-h:2.1rem}
	.v6-slider-wrap--fleches-cote .v6-fleche{
		position:absolute;
		top:calc(50% - (var(--v6-nav-h) / 2));
		transform:translateY(-50%);
		background:rgba(var(--v6-bleu-rgb),1);
		color:var(--v6-blanc);
	}
	.v6-slider-wrap--fleches-cote .v6-fleche:hover{background:rgba(var(--v6-bleu-2-rgb),1)}
	.v6-slider-wrap--fleches-cote .v6-fleche--prec{left:4px}
	.v6-slider-wrap--fleches-cote .v6-fleche--suiv{right:4px}
}
/* Sous 768 px la fleche reprend la taille reduite de l'accueil actuel : a
   2,75 rem elle couvre le tiers d'une carte. */
@media(max-width:767.98px){
	.v6-slider-wrap--fleches-cote .v6-fleche{width:2.25rem;height:2.25rem}
	.v6-slider-wrap--fleches-cote .v6-fleche .v6-ico{width:.95rem;height:.95rem}
}

/* L'invitation a deposer un avis, JUSTE APRES les avis : c'est la que
   l'intention est la plus forte, et un client existant ne descend jamais
   jusqu'au pied de page. */
.v6-avis-invite{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.5rem;
	margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--v6-line);text-align:center;
}
.v6-avis-invite p{margin:0;color:var(--v6-doux);font-size:.98rem}
/* ⚠️ Bouton BLANC obligatoire : les regles de marque de Google interdisent de
   poser leur logo couleur sur un aplat colore. */
.v6-btn-google{
	display:inline-flex;align-items:center;gap:.6rem;
	background:rgba(var(--v6-blanc-rgb),1);border-radius:var(--v6-r);padding:.7rem 1.2rem;
	box-shadow:inset 0 0 0 1.5px var(--v6-line),0 6px 16px rgba(var(--v6-bleu-rgb),.08);
	font-weight:700;color:var(--v6-bleu);
	transition:box-shadow .2s ease,transform .18s ease;
}
.v6-btn-google:hover{box-shadow:inset 0 0 0 1.5px var(--v6-bleu),0 10px 22px rgba(var(--v6-bleu-rgb),.14);transform:translateY(-2px)}
.v6-btn-google img{display:block}

/* ==========================================================================
   14. FAQ
   Le marquage vient de acr_faq() (php/faq_shortcode.php) : <details
   class="acr-faq-item">. Ce composant injecte son PROPRE <style> sombre dans
   le corps de page, donc APRES cette feuille : il faut une specificite
   superieure (.v6-page .acr-faq-item = 0,2,0) pour le reprendre. Ne pas
   redescendre a `.acr-faq-item` seul, la regle serait perdue.
   ========================================================================== */
.v6-page .v6-faq .acr-faq-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.v6-page .v6-faq .acr-faq{max-width:none;margin:0;gap:.75rem}
/* La colonne de gauche tenait en 320 px face a une liste de dix questions :
   elle laissait 700 px de vide et le titre disparaissait des le 3e depli.
   Elle accompagne desormais la lecture. `top` = hauteur de la barre collante
   (63 px) + une respiration. Neutralise sous 992 px, ou les deux colonnes
   s'empilent et ou un element colle n'a plus de sens. */
@media(min-width:992px){
	/* ⚠️ `align-self:flex-start` est aussi indispensable que `position:sticky`.
	   La colonne est un element flex : par defaut elle s'etire sur toute la
	   hauteur de la rangee, il ne lui reste donc AUCUNE course a parcourir et
	   le collage ne se declenche jamais (mesure : top = -432 px, le titre
	   sortait par le haut). En hauteur naturelle, elle glisse. */
	.v6-faq-col{position:sticky;top:5.5rem;align-self:flex-start}
}
.v6-page .v6-faq .acr-faq-item{
	border:1px solid var(--v6-line);
	border-radius:var(--v6-r);
	background:rgba(var(--v6-blanc-rgb),1);
	box-shadow:var(--v6-ombre-s);
}
.v6-page .v6-faq .acr-faq-item>summary{
	font-weight:700;color:var(--v6-bleu);font-size:1.02rem;padding:1.1rem 1.4rem;
}
.v6-page .v6-faq .acr-faq-item>summary::after{color:var(--v6-orange);font-size:1.4rem;opacity:1}
.v6-page .v6-faq .acr-faq-a{color:var(--v6-doux);padding:0 1.4rem 1.3rem;font-size:.97rem;opacity:1}
.v6-page main .v6-faq .acr-faq-a a{color:var(--v6-bleu);text-decoration:underline;text-decoration-color:var(--v6-orange)}
.v6-page .v6-faq .acr-faq-item:target{border-color:var(--v6-orange);
	box-shadow:0 0 0 3px rgba(var(--v6-orange-rgb),.16)}

/* ==========================================================================
   15. APPEL FINAL
   ⛔ Plus d'encart bleu nuit pose sur un fond clair : la section EST la coupe
   orange, pleine largeur, et le contenu y est centre. Un encart dans une
   coupe aurait fait deux cadres imbriques pour un seul message.
   ========================================================================== */
.v6-appel-fin{max-width:46rem;margin:0 auto;text-align:center}
.v6-appel-fin p{max-width:44ch;margin-left:auto;margin-right:auto}
.v6-appel-fin .v6-btn{min-width:13rem}

/* ==========================================================================
   16. PIED DE PAGE
   ========================================================================== */
/* ⛔ AUCUNE marge en haut. Elle laissait passer 4 rem du fond de page entre la
   coupe orange et le pied bleu nuit : une bande claire parasite qui coupait la
   descente juste avant la fin. La section qui precede porte deja sa propre
   respiration en padding. */
.v6-pied{background:rgba(var(--v6-bleu-3-rgb),1);color:var(--v6-bleu-clair);padding:4rem 0 1.5rem;
	font-size:.94rem;margin-top:0}
.v6-pied h2,.v6-pied h3{color:var(--v6-blanc);font-size:.9rem;font-weight:800;margin-bottom:1rem;letter-spacing:.02em}
.v6-pied a{color:var(--v6-bleu-clair)}
.v6-pied a:hover{color:var(--v6-orange)}
.v6-pied img{max-width:100%;height:auto}
.v6-pied .v6-ico{color:var(--v6-orange)}
.v6-pied__desc{max-width:38ch}
.v6-pied__bas{border-top:1px solid rgba(var(--v6-blanc-rgb),.14);margin-top:2.6rem;padding-top:1.3rem;font-size:.86rem}
.v6-reseau{width:38px;height:38px;border-radius:10px;background:rgba(var(--v6-blanc-rgb),.09);
	display:inline-flex;align-items:center;justify-content:center;color:var(--v6-blanc);
	transition:background .2s ease}
/* 🔴 LE SURVOL PASSAIT EN ORANGE ET LAISSAIT LE PICTO BLANC : 3,01:1, sous
   le seuil de 4,5 des lettres comme sous celui de 3 des graphismes une fois
   le picto aminci par le masque. C'est aussi la regle que la charte interdit
   partout ailleurs - ⛔ jamais de blanc sur orange.
   La regle est desormais simple et tenue partout : LE PICTO EST BLANC QUAND
   LE FOND EST BLEU NUIT. Le survol remplit donc en bleu nuit, pas en orange.
   ⚠ Ici c'est `--v6-bleu-2` et non `--v6-bleu` : le pied de page est deja en
   `--v6-bleu-3`, un aplat de bleu nuit standard s'y verrait a peine. Le
   remplissage doit contraster avec CE QUI LE PORTE, pas avec la charte en
   general. Blanc sur `#1B3A5C` : 11,2:1. */
/* ⚠️ SPECIFICITE : `.v6-pied a` (0,1,1) et `.v6-pied a:hover` (0,2,1) posent
   la couleur de TOUS les liens du pied. Un simple `.v6-reseau` (0,1,0) ne
   passait pas - mesure faite : le picto sortait en `--v6-bleu-clair` au repos
   et en ORANGE au survol, pas du tout ce que la regle du composant disait.
   Il faut donc `.v6-pied .v6-reseau` (0,2,0) et `.v6-pied .v6-reseau:hover`
   (0,3,0). ⛔ Ne pas « regler » ca avec un `!important` : c'est une collision
   de portee, pas un manque de poids. */
.v6-pied .v6-reseau{color:var(--v6-blanc);transition:background .2s ease,color .2s ease}
.v6-pied .v6-reseau:hover{background:rgba(var(--v6-bleu-2-rgb),1);color:var(--v6-blanc)}
.v6-reseau .soc-ico{width:18px;height:18px}
.v6-zones{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.86rem;margin-top:2.2rem;
	padding-top:1.4rem;border-top:1px solid rgba(var(--v6-blanc-rgb),.10)}
.v6-zones-label{color:var(--v6-bleu-clair);opacity:.8;font-weight:700}

/* Formulaire d'inscription a la lettre d'information. */
.v6-nl-champ{flex:1 1 auto;min-width:0;border:0;border-radius:var(--v6-r);
	padding:.75rem 1rem;background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-texte);font:inherit;font-size:.95rem}
.v6-nl-champ::placeholder{color:var(--v6-placeholder)}
.v6-nl-champ:focus{outline:3px solid var(--v6-orange);outline-offset:2px}
.v6-nl-rgpd{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;margin-top:.85rem;
	color:var(--v6-bleu-clair)}
.v6-nl-rgpd input{margin-top:.25rem;flex:0 0 auto;accent-color:var(--v6-orange);
	width:1.05rem;height:1.05rem}
.v6-nl-rgpd a{text-decoration:underline}
.v6-pied .alert{font-size:.86rem;margin-top:.75rem;border-radius:var(--v6-r)}

/* ==========================================================================
   17. ADAPTATIONS
   ========================================================================== */
@media(max-width:991.98px){
	.v6-sec{padding:3.75rem 0}
	.v6-inclus{margin-top:0}
	.v6-sec-pastille{padding-top:5.5rem}
	.v6-avis-phare{padding:1.9rem}
	.v6-logo__mot{font-size:1.65rem}
	.v6-logo__o{width:1.24rem;height:1.24rem;border-width:.33rem;margin-bottom:-.21rem}
	.v6-hero{padding:3rem 0 3.5rem}
}
@media(max-width:575.98px){
	/* Les quatre preuves se rangeaient au fil de l'eau : deux sur la premiere
	   ligne, une sur la deuxieme, une sur la troisieme. Une grille de deux
	   colonnes les aligne. */
	.v6-hero-puces{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .9rem;font-size:.9rem}
	.v6-hero-puces span{align-items:flex-start}
	.v6-hero-puces .v6-ico{margin-top:.28rem}
	/* Deux boutons de largeurs differentes empiles lisent comme une erreur. */
	.v6-hero .v6-btn{width:100%}
	/* ⚠️ Ces deux lignes DOIVENT rester apres le palier 992 ci-dessus : les
	   deux media queries matchent sous 576 px et se valent en specificite,
	   c'est donc l'ordre d'ecriture qui tranche. Placees plus haut (elles
	   l'etaient, dans la section 6), elles n'avaient tout simplement aucun
	   effet. */
	.v6-logo__mot{font-size:1.5rem}
	.v6-logo__o{width:1.13rem;height:1.13rem;border-width:.3rem;margin-bottom:-.19rem}
	.v6-prix strong{font-size:2.4rem}
	.v6-carte-offre{padding:1.6rem 1.25rem}
	.v6-etiq--flot{left:1.25rem}
}
/* MOUVEMENT REDUIT.
   ⚠️ Le rideau `*{transition-duration:.01ms}` de la maquette d'origine tuait
   TOUT, y compris les fondus de couleur, qui ne declenchent aucun trouble
   vestibulaire. Or ce reglage est actif sur bien plus de postes qu'on ne le
   croit : sous Windows 11, « Parametres > Accessibilite > Effets visuels >
   Effets d'animation » sur Desactive suffit, et TOUS les navigateurs le
   respectent (Chrome, Firefox, Edge). On ne coupe donc QUE le deplacement, et
   on remplace le balayage du bouton par un aplat immediat : le survol reste
   parfaitement lisible, il ne glisse plus.

   ⚠️ `.v6-mouvement` DESACTIVE ce bloc. C'est un interrupteur de RECETTE, pose
   sur <body> par `?mouvement=1`, pour qu'on puisse valider les
   animations de la charte sans toucher aux reglages de son poste. Il n'est
   jamais actif pour un visiteur : la preference reste respectee par defaut. */
/* ==========================================================================
   17. COMPOSANTS DE PAGE INTERIEURE
   ----------------------------------------------------------------------
   Ajoutes le 2026-08-25 avec la migration de /contact, la premiere page
   interieure a passer a la charte. ⛔ RIEN ICI N'EST PROPRE A /contact :
   fil d'Ariane, champs de formulaire, colonne laterale et bandeau de
   confirmation sont les quatre briques que TOUTES les pages interieures
   redemandent. Les ecrire au niveau de la page, c'etait garantir six
   versions differentes du meme champ de saisie.
   ========================================================================== */

/* --- FIL D'ARIANE ---------------------------------------------------------
   ⚠️ Il vit SOUS la barre collante, sur le fond creme de la page. Il n'a
   donc pas besoin de fond a lui : un aplat de plus ferait une bande
   parasite entre la barre et le titre. */
.v6-page .v6-fil{padding:1.1rem 0 0}
.v6-page .v6-fil ol{
	display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
	list-style:none;margin:0;padding:0;font-size:.85rem;
}
.v6-page .v6-fil a{color:var(--v6-doux);font-weight:600;text-decoration:none}
.v6-page .v6-fil a:hover{color:var(--v6-bleu)}
.v6-page .v6-fil li + li::before{
	content:"";display:inline-block;width:.42rem;height:.42rem;margin-right:.5rem;
	border-right:1.5px solid var(--v6-line);border-bottom:1.5px solid var(--v6-line);
	transform:rotate(-45deg);vertical-align:middle;
}
/* La page courante n'est pas un lien : elle se lit, elle ne se clique pas. */
.v6-page .v6-fil [aria-current]{color:var(--v6-bleu);font-weight:700}
/* La maison de l'accueil : un picto, pas un mot en plus. Le libelle
   « Accueil » est juste a cote, dans le `<span itemprop="name">`. */
.v6-page .v6-fil a{display:inline-flex;align-items:center;gap:.35rem}
.v6-page .v6-fil__maison{width:.95rem;height:.95rem;color:var(--v6-orange);flex:0 0 auto}

/* --- CHAMPS DE FORMULAIRE -------------------------------------------------
   ⚠️ On REPEINT les classes de Bootstrap (`.form-control`, `.form-label`,
   `.invalid-feedback`), on ne les remplace pas. Deux raisons :
     - `php/js.php` pose `is-invalid` et lit `needs-validation` : renommer
       ces classes casserait la validation de TOUS les formulaires du site ;
     - la geometrie de Bootstrap est deja la, seule la couleur etait calibree
       pour le fond sombre.
   ⛔ Ne jamais renommer un champ, un id ni un `data-*` en migrant une page :
   `process.php` et le defi anti-robot en dependent. */
.v6-page .form-label{
	display:block;margin-bottom:.4rem;
	font-size:.88rem;font-weight:700;color:var(--v6-bleu);
}
.v6-page .form-control,
.v6-page .form-select{
	width:100%;padding:.7rem .95rem;
	font:inherit;font-size:.95rem;color:var(--v6-texte);
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);border-radius:var(--v6-r);
	transition:border-color .2s ease,box-shadow .2s ease;
}
/* ⚠️ L'invite passe en --v6-doux (5,27:1 sur blanc) et NON en
   --v6-placeholder, herite de la maquette a 3,50:1. Une invite est du texte
   qu'on lit vraiment : c'est elle qui dit quel format on attend. */
.v6-page .form-control::placeholder{color:var(--v6-doux);opacity:1}
.v6-page .form-control:focus,
.v6-page .form-select:focus{
	outline:0;border-color:var(--v6-orange);
	box-shadow:0 0 0 3px rgba(var(--v6-orange-rgb),.22);
}
.v6-page textarea.form-control{min-height:9rem;resize:vertical}
/* 🔴 LES CASES A COCHER ET LES BOUTONS RADIO AUSSI. Bootstrap les peint en
   sombre sous `data-bs-theme="dark"`, et le site garde ce reglage (le panneau
   de recherche et le menu plein ecran en dependent). Sans ces lignes, une case
   a cocher sort en carre gris ardoise au milieu d'un formulaire clair - releve
   sur « Se souvenir de moi » et sur les consentements RGPD, c'est-a-dire
   exactement les cases qu'un client doit voir pour cocher en connaissance de
   cause. */
.v6-page .form-check-input{
	background-color:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-doux);
}
.v6-page .form-check-input:checked{
	background-color:rgba(var(--v6-orange-rgb),1);
	border-color:rgba(var(--v6-orange-rgb),1);
}
/* ⚠️ La coche elle-meme est une IMAGE en data-URI, blanche chez Bootstrap :
   sur l'orange elle tombe a 2,40:1. On la redessine en bleu nuit. */
.v6-page .form-check-input:checked[type=checkbox]{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2311263F' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}
.v6-page .form-check-input:checked[type=radio]{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%2311263F'/%3E%3C/svg%3E");
}
.v6-page .form-check-input:focus{border-color:var(--v6-orange);box-shadow:0 0 0 3px rgba(var(--v6-orange-rgb),.3)}
.v6-page .form-check-label{color:var(--v6-texte)}
/* Le libelle du defi anti-robot passe par `form-control-plaintext`, que
   Bootstrap peint aussi pour le sombre. ⛔ Ne pas toucher a sa CLASSE :
   `.captcha-question[data-traitement]` est lue par le controle anti-robot, et
   sans elle tout envoi de formulaire est refuse, en silence. */
.v6-page .form-control-plaintext{color:var(--v6-texte)}
.v6-page .input-group-text{background:rgba(var(--v6-peche-rgb),1);border-color:var(--v6-line);color:var(--v6-bleu)}

/* 🔴 LES TABLEAUX DE BOOTSTRAP AUSSI. Sous `data-bs-theme="dark"` il pose
   `--bs-table-bg:#020917` et `--bs-table-color:#fff` : un tableau sort donc en
   BLANC SUR QUASI-NOIR au milieu d'une page creme. Releve sur le recapitulatif
   de `/commander` - c'est-a-dire le tableau qui liste ce que le client
   s'apprete a payer, et le seul endroit ou il verifie son total avant de
   valider. Il y en a peu sur le site (4), mais ce sont les plus sensibles.
   ⚠️ On rebranche les VARIABLES, pas les regles : Bootstrap construit tout son
   composant dessus (rayures, survol, bordures, variantes), et les redefinir
   une par une les desynchroniserait. */
.v6-page .table{
	--bs-table-color:var(--v6-texte);
	--bs-table-bg:transparent;
	--bs-table-border-color:var(--v6-line);
	--bs-table-striped-color:var(--v6-texte);
	--bs-table-striped-bg:rgba(var(--v6-peche-rgb),.45);
	--bs-table-hover-color:var(--v6-bleu);
	--bs-table-hover-bg:rgba(var(--v6-peche-rgb),.6);
	--bs-table-active-color:var(--v6-bleu);
	--bs-table-active-bg:rgba(var(--v6-peche-rgb),1);
}
/* L'en-tete d'un tableau : c'est ce qui nomme les colonnes, il porte donc
   l'encre pleine et la graisse. */
.v6-page .table>thead th{color:var(--v6-bleu);font-weight:800;border-bottom-color:var(--v6-line)}
/* ⚠️ Les lignes de MISE EN AVANT (`table-warning`, `table-success`...) : sous
   le theme sombre ce sont des aplats quasi-noirs teintes. Ici, la surface
   claire de l'etat, avec son encre. `table-warning` sert au motif de virement
   OBLIGATOIRE : sans lui, un client paie sans reference et le rapprochement
   bancaire echoue. */
/* ⚠️ `background-color` EN DIRECT, pas `--bs-table-bg-state`. Bootstrap resout
   ses variantes avant nous et sert son propre jaune #FFF3CD : lisible, mais hors
   charte. En posant la couleur elle-meme, a (0,3,2), on passe devant.
   ⚠️ `background-image:none` : Bootstrap empile un degrade par-dessus pour ses
   rayures, qui reteinterait notre aplat. */
.v6-page .table>:not(caption)>tr.table-warning>*{background-color:rgba(var(--v6-attente-rgb),.14);background-image:none;color:var(--v6-bleu)}
.v6-page .table>:not(caption)>tr.table-success>*{background-color:rgba(var(--v6-succes-rgb),.10);background-image:none;color:var(--v6-bleu)}
.v6-page .table>:not(caption)>tr.table-danger>*{background-color:rgba(var(--v6-erreur-rgb),.10);background-image:none;color:var(--v6-bleu)}
/* ⚠️ `.text-muted` dans une cellule mise en avant reprend l'encre : la charte
   le peint en gris doux, ce qui le rendait plus pale que la ligne qu'il est
   cense signaler. */
.v6-page .table>:not(caption)>tr[class*="table-"]>* .text-muted,
.v6-page .table>:not(caption)>tr[class*="table-"]>*.text-muted{color:var(--v6-texte)!important}
/* La fleche du <select> est dessinee ici : celle du navigateur ne suit pas
   la charte et change d'un systeme a l'autre. */
.v6-page select.form-control{
	appearance:none;-webkit-appearance:none;padding-right:2.4rem;
	background-image:linear-gradient(45deg,transparent 50%,var(--v6-bleu) 50%),
	                 linear-gradient(135deg,var(--v6-bleu) 50%,transparent 50%);
	background-position:calc(100% - 1.15rem) center,calc(100% - .8rem) center;
	background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat;
}
.v6-page .invalid-feedback{
	display:none;margin-top:.35rem;font-size:.82rem;font-weight:600;color:var(--v6-erreur);
}
.v6-page .was-validated .form-control:invalid,
.v6-page .form-control.is-invalid,
.v6-page .was-validated .form-select:invalid{border-color:var(--v6-erreur)}
.v6-page .was-validated .form-control:invalid ~ .invalid-feedback,
.v6-page .form-control.is-invalid ~ .invalid-feedback,
.v6-page .was-validated .form-select:invalid ~ .invalid-feedback{display:block}
.v6-page .form-check-input:checked{background-color:var(--v6-orange);border-color:var(--v6-orange)}

/* Le defi anti-robot : la question et le champ sur une ligne.
   ⛔ `label.captcha-question[data-traitement]` est OBLIGATOIRE et ne se
   renomme pas - php/js.php rafraichit le defi par ce selecteur exact. */
.v6-page .v6-captcha{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.v6-page .v6-captcha .captcha-question{
	flex:0 0 auto;margin:0;padding:.7rem 1rem;
	font-weight:800;color:var(--v6-bleu);
	background:rgba(var(--v6-peche-rgb),1);border-radius:var(--v6-r);
}
.v6-page .v6-captcha .form-control{flex:1 1 12rem;min-width:0}

/* La grille du formulaire : des colonnes Bootstrap, rien de plus. */
.v6-page .v6-form{display:flex;flex-wrap:wrap;gap:1.1rem 1.2rem}
.v6-page .v6-form > *{flex:1 1 100%;min-width:0}
.v6-page .v6-form .v6-form-6{flex:1 1 calc(50% - .6rem)}
.v6-page .v6-form .v6-form-4{flex:1 1 calc(33.333% - .8rem)}
.v6-page .v6-form .v6-form-8{flex:1 1 calc(66.666% - .4rem)}
@media(max-width:575.98px){
	.v6-page .v6-form .v6-form-6,
	.v6-page .v6-form .v6-form-4,
	.v6-page .v6-form .v6-form-8{flex:1 1 100%}
}

/* --- CARTE DE CONTENU (formulaire, encart) -------------------------------- */
.v6-page .v6-bloc{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	padding:1.8rem;
}
@media(max-width:575.98px){.v6-page .v6-bloc{padding:1.2rem}}

/* --- CARTE « INTERLOCUTEUR » --------------------------------------------
   🔴 Composant OUBLIE au premier jet de la migration : le marquage etait
   ecrit, les regles non. Resultat mesure a l'ecran : le nom, le role et le
   telephone se suivaient sur une seule ligne, colles
   (« Stephane MARTINVotre projet, le budget, les delais 06 79 66 41 03 »).
   Trois `<span>` sans `display:block` ne font pas trois lignes.
   ⚠ C'est le genre de defaut qu'une capture montre et qu'une relecture du
   code ne montre pas : le marquage etait correct, il n'avait juste pas de
   style. Regarder la page, toujours. */
.v6-page .v6-personne{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem}
.v6-page .v6-personne__ini{
	flex:0 0 auto;width:2.9rem;height:2.9rem;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc);
	font-weight:800;font-size:.9rem;letter-spacing:.02em;
}
.v6-page .v6-personne__nom{display:block;color:var(--v6-bleu);font-size:1.05rem;line-height:1.3;margin-top:.15rem}
.v6-page .v6-personne__role{display:block;color:var(--v6-doux);font-size:.87rem;line-height:1.4;margin-bottom:.5rem}
.v6-page .v6-personne__tel{
	display:inline-flex;align-items:center;gap:.4rem;
	color:var(--v6-bleu);font-weight:800;text-decoration:none;
}
.v6-page .v6-personne__tel .v6-ico{color:var(--v6-orange);width:1rem;height:1rem}
.v6-page .v6-personne__tel:hover{text-decoration:underline;text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:2px}

/* --- BANDEAU DE CONFIRMATION ---------------------------------------------- */
.v6-page .v6-flash{
	display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1.4rem;
	padding:.9rem 1.1rem;border-radius:var(--v6-r);
	background:rgba(var(--v6-succes-rgb),.10);
	box-shadow:inset .2rem 0 0 -.02rem var(--v6-succes);
	color:var(--v6-texte);font-weight:600;
}
.v6-page .v6-flash .v6-ico{color:var(--v6-succes);flex:0 0 auto;margin-top:.1rem}

/* --- COLONNE LATERALE -----------------------------------------------------
   ⚠️ `position:sticky` seul est inoperant sur un element flex etire : etire
   sur la hauteur de la rangee, il n'a aucune course a parcourir. D'ou
   `align-self:flex-start`. Piege deja rencontre sur la FAQ de l'accueil. */
.v6-page .v6-aside{align-self:flex-start;position:sticky;top:6.5rem;display:grid;gap:1rem}
@media(max-width:991.98px){.v6-page .v6-aside{position:static;top:auto}}
.v6-page .v6-widget{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	padding:1.3rem;
}
.v6-page .v6-widget__titre{
	font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	color:var(--v6-doux);margin:0 0 .9rem;
}
.v6-page .v6-widget ul{list-style:none;margin:0;padding:0}
/* Les lignes d'information : picto, intitule, valeur. */
.v6-page .v6-info{display:flex;gap:.8rem;padding:.6rem 0}
.v6-page .v6-info + .v6-info{border-top:1px solid var(--v6-line)}
.v6-page .v6-info .v6-ico{color:var(--v6-orange);flex:0 0 auto;margin-top:.15rem}
.v6-page .v6-info__k{
	display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;
	text-transform:uppercase;color:var(--v6-doux);
}
.v6-page .v6-info__v,
.v6-page main .v6-info a{color:var(--v6-bleu);font-weight:700;text-decoration:none;line-height:1.4}
.v6-page main .v6-info a:hover{text-decoration:underline;text-decoration-color:var(--v6-orange);text-decoration-thickness:2px}

/* Les raccourcis de la colonne : une rangee cliquable, pas une liste a puces. */
.v6-page .v6-raccourci{
	display:flex;align-items:flex-start;gap:.8rem;padding:.7rem;
	border-radius:var(--v6-r);text-decoration:none;
	transition:background .2s ease;
}
.v6-page .v6-raccourci:hover{background:rgba(var(--v6-creme-rgb),1)}
.v6-page .v6-raccourci .v6-ico{color:var(--v6-orange);flex:0 0 auto;margin-top:.15rem}
.v6-page .v6-raccourci strong{display:block;color:var(--v6-bleu);font-size:.95rem}
.v6-page .v6-raccourci span span{display:block;font-size:.82rem;color:var(--v6-doux);line-height:1.4}

/* --- LA PAGE 404 ---------------------------------------------------------
   Le « 0 » est l'ANNEAU du logotype. Une page d'erreur est souvent la
   premiere page qu'un visiteur egare voit de nous : c'est exactement la
   qu'il faut rester reconnaissable.
   ⚠️ Contrairement a l'anneau de la barre, celui-ci est dimensionne en `em`
   et non en `rem` : il doit suivre un titre en `clamp()`. Les rapports sont
   ceux du logotype, a l'identique - anneau .75x le corps, filet .2x,
   descente .125x. ⛔ Ne pas les improviser : c'est ce rapport qui fait que
   l'anneau se lit comme un « o » et non comme une roue. */
.v6-page .v6-404{
	font-weight:800;letter-spacing:-.05em;line-height:1;margin:.4rem 0 1.2rem;
	font-size:clamp(4.5rem,16vw,9rem);color:var(--v6-bleu);
}
.v6-page .v6-404__o{
	display:inline-block;box-sizing:border-box;vertical-align:baseline;
	width:.75em;height:.75em;margin:0 .055em -.125em;border-radius:50%;
	border:.2em solid var(--v6-orange);border-top-color:transparent;
	transform:rotate(-45deg);
}
/* Les pistes de sortie : centrees comme le reste de la page, et bornees pour
   ne pas s'etaler sur toute la largeur d'un grand ecran. */
.v6-page .v6-404__pistes{
	display:inline-grid;gap:.55rem;text-align:left;
	margin-inline:auto;max-width:34rem;
}
.v6-page .v6-404__pistes kbd{
	font:inherit;font-size:.9em;font-weight:800;padding:.05rem .4rem;
	background:rgba(var(--v6-peche-rgb),1);color:var(--v6-bleu);border-radius:4px;
}

/* --- CARTE GEOGRAPHIQUE PLEINE LARGEUR ------------------------------------
   ⚠️ La section qui la porte doit etre en `overflow:hidden` : sans quoi les
   100vw ajoutent une barre de defilement horizontale. */
.v6-page .v6-plan{position:relative;margin-top:2.2rem}
.v6-page .v6-plan iframe{
	display:block;width:100%;height:26rem;border:0;
	filter:grayscale(.25) contrast(1.02);
}
.v6-page .v6-plan__carte{
	position:absolute;left:max(1rem,calc((100% - 1320px) / 2));bottom:1.6rem;
	background:rgba(var(--v6-blanc-rgb),1);border-radius:var(--v6-r-carte);
	box-shadow:var(--v6-ombre);padding:1.2rem 1.4rem;max-width:19rem;
}
.v6-page .v6-plan__k{
	display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;
	text-transform:uppercase;color:var(--v6-doux);margin-bottom:.35rem;
}
.v6-page .v6-plan address{font-style:normal;font-weight:800;color:var(--v6-bleu);margin:0 0 .9rem;line-height:1.4}
@media(max-width:575.98px){
	.v6-page .v6-plan iframe{height:20rem}
	.v6-page .v6-plan__carte{position:static;max-width:none;margin-top:-3rem;margin-inline:1rem}
}

/* --- LES PAGES LEGALES, REPEINTES -----------------------------------------
   ⛔ ON NE TOUCHE PAS AU MARQUAGE DE CES PAGES. Ce sont des documents
   juridiques : mentions légales, CGU, CGV, données personnelles. Réécrire
   leur structure pour la faire entrer dans les composants de la charte,
   c'est prendre le risque de déplacer, dupliquer ou perdre une clause - pour
   un gain purement esthétique. On repeint leur vocabulaire `legal-*`, comme
   on a repeint le panneau de recherche et le bandeau de consentement.
   ⚠️ Ces quatre pages partagent EXACTEMENT le même vocabulaire : ce bloc les
   sert toutes les quatre, et servira les suivantes du même genre.
   ↺ Le jour où `light.css` sera supprimée, ces règles resteront la seule
   définition de `legal-*` : c'est voulu. */
/* ↺ LARGEUR NON BRIDEE (demande de Stephane, 25/08). J'avais borne le bloc a
   64 rem et les paragraphes a 70 caracteres - la regle de lisibilite classique
   pour du texte long. Stephane veut toute la largeur du conteneur : c'est son
   arbitrage, et il vaut aussi pour la densite d'information de ces pages, qui
   se parcourent plus qu'elles ne se lisent.
   ⚠ Le `.container` plafonne deja a 1320 px : « toute la largeur » ne veut
   donc pas dire « toute la fenetre », la page garde ses gouttieres. */
.v6-page .legal-wrap{max-width:none}

/* En-tête du document : le titre à gauche, la date de mise à jour à droite.
   ⚠️ `align-items:flex-start` et non `center` : sur un titre qui passe à la
   ligne, un alignement centré fait flotter la date au milieu du vide. */
.v6-page .legal-header{
	display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;
	align-items:flex-start;justify-content:space-between;
	padding-bottom:1.4rem;margin-bottom:1.8rem;
	border-bottom:1px solid var(--v6-line);
}
/* Le surtitre reprend la pastille de la charte. ⛔ Sa puce décorative est
   masquée : la pastille EST déjà le repère, un point de plus fait doublon. */
.v6-page .legal-kicker{
	display:inline-block;
	font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	padding:.4rem .9rem;border-radius:var(--v6-r);margin-bottom:.7rem;
}
.v6-page .legal-kicker-dot{display:none}
.v6-page .legal-title{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--v6-bleu);margin:0}
.v6-page .legal-updated{
	margin:0;font-size:.82rem;font-weight:700;color:var(--v6-doux);
	white-space:nowrap;padding-top:.3rem;
}

/* L'encart d'avertissement en tête de document. */
.v6-page .legal-note{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	padding:1.1rem 1.3rem;margin-bottom:2rem;
}
.v6-page .legal-note p{margin:0;color:var(--v6-texte)}

/* Les cartes d'identité de l'éditeur. ⚠️ `minmax(0,1fr)` et non `1fr` : une
   piste en `1fr` ne descend pas sous la largeur de son contenu, et une URL
   longue dans une carte ferait déborder la page. */
.v6-page .legal-grid{
	display:grid;gap:1rem;margin-bottom:2.2rem;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
}
.v6-page .legal-card{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	padding:1.4rem;min-width:0;
}
.v6-page .legal-card h2,
.v6-page .legal-card h3{color:var(--v6-bleu)}
.v6-page .legal-brand img{max-width:9rem;height:auto;margin-bottom:1rem}
/* Le logotype de la charte dans une carte : plus petit que dans la barre.
   ⚠ L'anneau est en `rem` et ne suit donc PAS la taille du mot : il faut le
   reduire dans la meme regle, avec le rapport du logotype (anneau .75x le
   corps, filet .2x, descente .125x). C'est ecrit noir sur blanc plus haut
   dans cette feuille - ne pas le redecouvrir a chaque fois. */
.v6-page .v6-logo--legal{display:inline-block;margin-bottom:1rem}
.v6-page .v6-logo--legal .v6-logo__mot{font-size:1.5rem}
.v6-page .v6-logo--legal .v6-logo__o{width:1.125rem;height:1.125rem;border-width:.3rem;margin-bottom:-.1875rem}
.v6-page .legal-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.v6-page .legal-list li{color:var(--v6-texte);font-size:.94rem;line-height:1.5}
.v6-page .legal-list strong{color:var(--v6-bleu)}

/* Le corps du document. Une largeur de ligne bornée : au-delà de 70 caractères
   l'œil perd la ligne suivante, et un document juridique se lit déjà mal. */
.v6-page .legal-section{margin-bottom:2rem}
.v6-page .legal-text{color:var(--v6-texte);line-height:1.7}
.v6-page .legal-text h2,
.v6-page .legal-text h3,
.v6-page .legal-section h2,
.v6-page .legal-section h3{color:var(--v6-bleu);margin-top:1.6rem;margin-bottom:.7rem}
.v6-page .legal-text ul,
.v6-page .legal-text ol{padding-left:1.2rem}
.v6-page .legal-text li{margin-bottom:.45rem}
.v6-page main .legal-text a{
	color:var(--v6-bleu);text-decoration:underline;
	text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:2px;
}
/* Le filet de séparation, très présent dans ces pages (36 occurrences). */
.v6-page .legal-divider{height:1px;background:var(--v6-line);margin:1.4rem 0;border:0}
/* Les pastilles d'information (durées de conservation, bases légales...). */
.v6-page .legal-pill{
	display:inline-block;padding:.3rem .7rem;border-radius:50px;
	background:rgba(var(--v6-peche-rgb),1);color:var(--v6-bleu);
	font-size:.78rem;font-weight:800;
}
/* 🔴 `.legal-flag` MARQUE UNE CLAUSE QUI ENGAGE (ici : ventes fermes et
   definitives). Elle etait ecrite EN ORANGE - 2,81:1 sur le creme, releve
   par la sonde de contraste. Or c'est justement la clause qu'un client doit
   pouvoir lire sans effort, et celle qu'on ne veut pas voir contestee pour
   illisibilite. Elle devient donc un ENCART : texte au contraste plein, et
   l'accent passe dans le filet lateral, ou 3:1 suffit.
   ⛔ Ne pas remettre de couleur sur le texte d'une clause. */
.v6-page .legal-flag{
	color:var(--v6-texte);
	border-left:4px solid var(--v6-orange);
	background:rgba(var(--v6-peche-rgb),.55);
	border-radius:0 var(--v6-r) var(--v6-r) 0;
	padding:1rem 1.2rem;margin:1.2rem 0;
}
.v6-page .legal-flag p:last-child{margin-bottom:0}
.v6-page .legal-flag strong{color:var(--v6-bleu)}

@media(max-width:575.98px){
	.v6-page .legal-card{padding:1.1rem}
	.v6-page .legal-note{padding:1rem}
	.v6-page .legal-updated{white-space:normal}
}

/* --- MODALE DE RAPPEL, REPEINTE -------------------------------------------
   Meme recette que le panneau de recherche : le marquage `.wl-*` ne bouge
   pas (php/js.php le pilote), seules les couleurs sont reprises. */
.v6-page .wl-modal{
	background:rgba(var(--v6-creme-rgb),1);
	border:1px solid var(--v6-line);
	box-shadow:var(--v6-ombre);
}
.v6-page .wl-modal-overlay{background:rgba(var(--v6-bleu-rgb),.42)}
.v6-page .wl-title,
.v6-page .wl-label{color:var(--v6-bleu)}
.v6-page .wl-desc,
.v6-page .wl-sep{color:var(--v6-doux)}
.v6-page .wl-input{
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	color:var(--v6-texte);border-radius:var(--v6-r);
}
.v6-page .wl-input:focus{
	outline:0;border-color:var(--v6-orange);
	box-shadow:0 0 0 3px rgba(var(--v6-orange-rgb),.22);
}
.v6-page .wl-input::placeholder{color:var(--v6-doux);opacity:1}
/* Surface orange, donc libelle BLEU NUIT : 5,08:1. */
.v6-page .wl-submit{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	border:0;border-radius:var(--v6-r);font-weight:800;
}
.v6-page .wl-submit:hover{background:rgba(var(--v6-orange-bas-rgb),1);color:var(--v6-bleu)}
.v6-page .wl-modal-close{background:rgba(var(--v6-bleu-rgb),.06);color:var(--v6-bleu)}
.v6-page .wl-modal-close:hover{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}
.v6-page .wl-success h3{color:var(--v6-succes)}
.v6-page .wl-success p{color:var(--v6-texte)}
/* La question du defi, dans la modale : meme traitement que dans une page. */
.v6-page .wl-modal .captcha-question{
	background:rgba(var(--v6-peche-rgb),1);color:var(--v6-bleu);
	font-weight:800;border-radius:var(--v6-r);padding:.6rem .9rem;
}

/* ==========================================================================
   18. LES PAGES D'OFFRE, REPEINTES
   ----------------------------------------------------------------------
   Ajouté le 2026-08-25 avec la migration de /creation-site-internet,
   /referencement-seo, /marketplaces et /association-ia-humain.

   ⛔ ON NE RÉÉCRIT PAS LE MARQUAGE DE CES PAGES. Ce sont les quatre pages
   d'atterrissage SEO du site : leur structure porte des titres, des ancres
   et un maillage interne calibrés. Les refaire au propre, c'est prendre le
   risque de perdre un `h2` ou une ancre pour un gain esthétique. On repeint
   leur vocabulaire `of-*` et les primitives `pd-*` qu'elles partagent -
   même recette que les pages légales.

   ⚠️ LES QUATRE PAGES PARTAGENT EXACTEMENT CE VOCABULAIRE : ce bloc les sert
   toutes les quatre, et servira les suivantes qui s'en servent aussi
   (/a-propos, /tarifs, /faqs en partie).

   🔴 CE QUI CHANGE VRAIMENT, ET QUI N'EST PAS QU'UNE COULEUR : l'ancienne
   charte avait DEUX accents, un bleu et un rouge, et s'en servait pour
   hiérarchiser (`.text-blue`, `.text-red`, `.of-ico.is-red`, `.of-ico.is-cyan`,
   le filet en dégradé rouge→bleu). La charte v6 n'a QU'UN accent, et il ne
   peut pas être une lettre. Toutes ces variantes convergent donc vers le même
   traitement : surface orange ou pastille bleu nuit, texte bleu nuit.
   ⛔ Ne pas essayer de « retrouver » deux accents : c'est la charte qui a
   tranché, pas la page.
   ========================================================================== */

.v6-page .pd-fiche-sec{padding:3.5rem 0;position:relative}
.v6-page .pd-card{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);
	border-radius:var(--v6-r-carte);
}
.v6-page .pd-muted{color:var(--v6-doux)}
.v6-page .pd-details-title{
	display:flex;align-items:center;gap:.6rem;
	font-size:1.15rem;font-weight:800;line-height:1.35;
	margin:0 0 1.1rem;padding-bottom:.75rem;
	border-bottom:1px solid var(--v6-line);color:var(--v6-bleu);
}
.v6-page .pd-details-title svg{flex-shrink:0;color:var(--v6-orange)}
.v6-page .pd-accent-danger{border-left:4px solid var(--v6-orange)}

/* L'encart SOMBRE qui casse le rythme : c'est la coupe bleu nuit de la charte,
   pas un dégradé inventé. ⚠️ Le texte secondaire y passe en --v6-bleu-clair,
   comme partout ailleurs sur le bleu nuit. */
.v6-page .pd-dark{
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc);border:0;
	border-radius:var(--v6-r-carte);
}
.v6-page .pd-dark h2,
.v6-page .pd-dark h3,
.v6-page .pd-dark strong{color:var(--v6-blanc)}
.v6-page .pd-dark .pd-muted,
.v6-page .pd-dark .pd-dark-sub,
.v6-page .pd-dark p{color:var(--v6-bleu-clair)}
.v6-page .pd-dark .pd-details-title{border-bottom-color:rgba(var(--v6-blanc-rgb),.16);color:var(--v6-blanc)}
.v6-page .pd-dark .pd-details-title svg{color:var(--v6-orange)}

/* Listes à coches : le picto est une SURFACE orange à glyphe bleu nuit. */
.v6-page ul.tik-list{list-style:none;margin:0 0 1.35rem;padding-left:0}
.v6-page ul.tik-list li{position:relative;display:block;margin-bottom:.6rem;padding-left:2rem;line-height:1.7}
.v6-page ul.tik-list li::before{
	content:"\2713";position:absolute;left:0;top:.15rem;
	width:1.35rem;height:1.35rem;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	font-size:.72rem;font-weight:900;
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	/* 🔴 `filter:none` N'EST PAS DECORATIF. theme.css:1004 pose un
	   `filter:invert(1)` sur cette puce : elle y etait une COCHE NOIRE EN SVG
	   retournee en blanc pour le fond sombre. Le filtre survit a la reecriture
	   de la regle - il n'est pas remis a zero par le simple fait de redefinir
	   le fond - et il inversait la pastille orange en CYAN (255,97,28 -> 0,158,227),
	   glyphe compris. Les coches des quatre pages d'offre sortaient donc bleues.
	   ⚠️ Meme piege partout ou une regle de theme.css pose un `filter` : il
	   faut l'annuler explicitement, la couleur seule ne suffit pas. */
	filter:none;background-image:none;
}
.v6-page .pd-dark ul.tik-list li{color:var(--v6-bleu-clair)}
.v6-page .pd-dark ul.tik-list li::before{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}

/* --- LE HERO D'UNE PAGE D'OFFRE ------------------------------------------
   ⚠️ Halos en POURCENTAGE, jamais en rem : le hero change de hauteur avec la
   longueur du titre, et un rayon absolu s'y fait couper net - c'est la
   couture qui avait traversé l'accueil. */
.v6-page .of-hero{
	padding:4rem 0 3.25rem;position:relative;overflow:hidden;
	background:
		radial-gradient(70% 45% at 82% 8%,rgba(var(--v6-orange-rgb),.14),transparent 62%),
		radial-gradient(55% 40% at 2% 58%,rgba(var(--v6-bleu-rgb),.08),transparent 60%),
		rgba(var(--v6-creme-rgb),1);
}
/* ⛔ Les deux halos de l'ancienne charte sont neutralisés : ils sont dans le
   fond ci-dessus. Deux jeux de halos superposés faisaient une tache. */
.v6-page .of-hero::before,
.v6-page .of-hero::after{content:none}
.v6-page .of-hero>.container{position:relative;z-index:1}
.v6-page .of-hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:992px){.v6-page .of-hero-grid{grid-template-columns:1.02fr .98fr;gap:3.5rem}}
.v6-page .of-hero h1{font-size:clamp(2.1rem,3.6vw,3rem);color:var(--v6-bleu);margin-bottom:1rem}
/* 🔴 `.text-blue` et `.text-red` étaient les DEUX accents de l'ancienne charte.
   La v6 n'en a qu'un, et il ne peut pas être une lettre (2,81:1 sur le crème) :
   l'accent du titre devient le SURLIGNAGE orange du héros, à lettres bleu
   nuit - 5,08:1. C'est le même geste que sur l'accueil. */
.v6-page .of-hero h1 .text-blue,
.v6-page .of-hero h1 .text-red{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	padding:0 .16em .04em;border-radius:.1em;
	-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* 🔴 --v6-texte, PAS --v6-doux. Le gris doux tient 4,7:1 sur le creme NU,
   mais le hero d'une page d'offre porte un halo orange par-dessus : le fond
   y remonte a #EAE9E5 et le rapport tombe a 4,33:1 - mesure sur les pixels
   rendus, sur les quatre pages. C'est le chapeau de la page la plus visitee,
   il passe en texte plein. ⚠️ Regle generale : `--v6-doux` n'est admissible
   que sur un fond NON teinte. */
.v6-page .of-hero-lead{font-size:1.08rem;color:var(--v6-texte);line-height:1.7;margin-bottom:1.25rem}
/* Un `<strong>` dit « ceci compte » : il ne peut pas etre PLUS pale que la
   phrase qui l'entoure. Dans un paragraphe attenue il remonte au bleu nuit. */
.v6-page .pd-muted strong,
.v6-page .of-hero-lead strong,
.v6-page .of-sec-lead strong{color:var(--v6-bleu)}

/* Le surtitre reprend la pastille de la charte. ⛔ Sa pastille clignotante est
   masquée : une animation en boucle non sollicitée, c'est exactement ce que
   `prefers-reduced-motion` demande d'arrêter - et elle ne disait rien. */
.v6-page .of-eyebrow{
	display:inline-block;
	font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	padding:.4rem .9rem;border-radius:var(--v6-r);margin-bottom:1rem;
}
.v6-page .of-eyebrow .pulse{display:none}

/* Pastilles d'audience et bloc de confiance. */
.v6-page .of-audience{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.v6-page .of-audience span{
	display:inline-flex;align-items:center;gap:.45rem;
	font-size:.82rem;font-weight:600;color:var(--v6-texte);
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:50px;padding:.4rem .85rem;
}
.v6-page .of-audience i{color:var(--v6-orange);font-size:.85em}
.v6-page .of-trust{
	display:inline-flex;align-items:center;gap:.8rem;margin-top:1.5rem;padding:.55rem 1rem;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:var(--v6-r);box-shadow:var(--v6-ombre-s);
}
.v6-page .of-trust-div{width:1px;height:28px;background:var(--v6-line)}
.v6-page .of-trust-score{display:flex;flex-direction:column;line-height:1.15}
/* ⚠️ L'or foncé, pas le jaune : sur du blanc, `#f2a100` ne donne que 2,2:1. */
/* La carte de confiance des pages d offre partage desormais le composant
   .v6-etoiles : plus de couleur de texte a poser, le SVG porte la sienne. */
.v6-page .of-trust-stars{font-size:.95rem;gap:.1em}
.v6-page .of-trust-label{font-size:.75rem;font-weight:600;color:var(--v6-doux);margin-top:.2rem}
.v6-page .of-trust-label strong{color:var(--v6-bleu)}

.v6-page .of-hero-visual{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}
.v6-page .of-hero-visual::before{content:none}
.v6-page .of-hero-visual .device-mac{width:100%;max-width:500px;position:relative;z-index:1}
.v6-page .of-hero-badge{
	position:absolute;z-index:2;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:var(--v6-r);padding:.55rem .85rem;box-shadow:var(--v6-ombre);
	font-size:.8rem;font-weight:700;color:var(--v6-bleu);
	display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
}
.v6-page .of-hero-badge i{color:var(--v6-orange)}

/* --- Pastille d'icône des cartes -----------------------------------------
   🔴 `is-red` et `is-cyan` étaient les deux accents secondaires. Elles
   convergent : pastille BLEU NUIT à picto ORANGE (5,09:1), le composant de la
   charte. ⛔ Pas de pastille pêche à picto orange : 2,52:1. */
.v6-page .of-ico,
.v6-page .of-ico.is-red,
.v6-page .of-ico.is-cyan{
	width:54px;height:54px;border-radius:14px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	font-size:1.35rem;margin-bottom:1.1rem;
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-orange);
	transition:transform .3s;
}
.v6-page .of-card:hover .of-ico{transform:scale(1.08)}
.v6-page .of-card{position:relative;height:100%}

/* --- Le duo « savoir-faire » --------------------------------------------- */
.v6-page .of-duo{display:grid;grid-template-columns:1fr;overflow:hidden;padding:0}
@media(min-width:768px){.v6-page .of-duo{grid-template-columns:1fr 1fr}}
.v6-page .of-duo-col{padding:2rem}
@media(min-width:768px){
	.v6-page .of-duo-col{padding:2.5rem}
	.v6-page .of-duo-col+.of-duo-col{border-left:1px solid var(--v6-line)}
}
@media(max-width:767.98px){.v6-page .of-duo-col+.of-duo-col{border-top:1px solid var(--v6-line)}}
.v6-page .of-duo-col--accent{background:rgba(var(--v6-creme-rgb),1)}
.v6-page .of-duo-col--dark{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}
.v6-page .of-duo-col--dark .of-duo-head h3{color:var(--v6-blanc)}
.v6-page .of-duo-col--dark .pd-muted{color:var(--v6-bleu-clair)}
.v6-page .of-duo-col--dark .of-ico{background:rgba(var(--v6-blanc-rgb),.12);color:var(--v6-orange)}
.v6-page .of-duo-col--dark ul.tik-list li{color:var(--v6-bleu-clair)}
/* Le libellé de rubrique : pastille pêche, pas du texte rouge. */
.v6-page .of-duo-tag{
	display:inline-block;font-size:.68rem;font-weight:800;
	text-transform:uppercase;letter-spacing:.1em;
	color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	padding:.28rem .7rem;border-radius:var(--v6-r);margin-bottom:.7rem;
}
.v6-page .of-duo-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.v6-page .of-duo-head .of-ico{margin-bottom:0}
.v6-page .of-duo-head h3{margin:0;font-size:1.2rem;font-weight:800;color:var(--v6-bleu)}

/* --- En-tête de section --------------------------------------------------
   ⚠️ Le filet était un dégradé rouge → bleu, les deux accents de l'ancienne
   charte. Il devient un trait ORANGE plein : une seule couleur, une seule
   idée. */
.v6-page .of-sec-head{margin-bottom:2rem}
.v6-page .of-sec-head h2{font-size:clamp(1.85rem,3.4vw,2.6rem);margin:.35rem 0 0;color:var(--v6-bleu)}
.v6-page .of-sec-sep{
	width:64px;height:3px;border-radius:2px;margin-top:1rem;
	background:rgba(var(--v6-orange-rgb),1);
}
.v6-page .of-sec-lead{color:var(--v6-doux);line-height:1.7;margin-top:1rem}

/* --- Cartes de maillage interne ------------------------------------------ */
.v6-page .of-mesh-card{display:flex;flex-direction:column;height:100%;text-decoration:none}
.v6-page .of-mesh-card h3{font-size:1.05rem;font-weight:700;color:var(--v6-bleu);margin:0 0 .4rem}
.v6-page .of-mesh-card p{color:var(--v6-doux);line-height:1.6;margin:0 0 1.1rem}
/* ⚠️ Le libellé passe en BLEU NUIT et non en orange : c'est du texte. Seule la
   flèche, qui est un graphisme, garde l'accent. */
.v6-page .of-mesh-more{margin-top:auto;font-weight:800;color:var(--v6-bleu)}
.v6-page .of-mesh-more i{margin-left:.35rem;color:var(--v6-orange);transition:transform .25s ease}
.v6-page .of-mesh-card:hover .of-mesh-more i{transform:translateX(4px)}

/* --- L'appel final -------------------------------------------------------- */
.v6-page .of-cta{
	position:relative;padding:3.5rem 2rem;border-radius:var(--v6-r-carte);
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	text-align:center;overflow:hidden;box-shadow:var(--v6-ombre);
}
/* Le filet de tête : orange plein, comme celui du panneau de recherche. */
.v6-page .of-cta::before{
	content:'';position:absolute;top:0;left:0;right:0;height:3px;
	background:rgba(var(--v6-orange-rgb),1);
}
.v6-page .of-cta h2{font-size:clamp(1.4rem,3vw,2rem);color:var(--v6-bleu);margin-bottom:.6rem}
.v6-page .of-cta p{color:var(--v6-doux);max-width:60ch;margin:0 auto 1.5rem;line-height:1.7}
.v6-page .of-cta.pd-dark{background:rgba(var(--v6-bleu-rgb),1);border:0;box-shadow:var(--v6-ombre)}
.v6-page .of-cta.pd-dark h2{color:var(--v6-blanc)}
.v6-page .of-cta.pd-dark p{color:var(--v6-bleu-clair)}
/* Sur la coupe nuit, la pastille du surtitre passe au blanc - comme partout. */
.v6-page .of-cta.pd-dark .of-eyebrow{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}

/* --- Bandes et portfolio -------------------------------------------------- */
.v6-page .of-band{background:rgba(var(--v6-blanc-rgb),1)}
.v6-page .of-portfolio{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}
.v6-page .of-portfolio h2,
.v6-page .of-pf-title{color:var(--v6-blanc)}
.v6-page .of-portfolio .pd-muted,
.v6-page .of-portfolio p{color:var(--v6-bleu-clair)}
.v6-page .of-portfolio-head{
	display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
	gap:1.25rem;margin-bottom:1.75rem;
}
.v6-page .of-arrows{display:flex;gap:.5rem}
/* Les flèches sont posées sur la coupe BLEU NUIT : blanches, comme celles du
   slider de l'accueil. ⛔ Le remplissage contraste avec le fond qui porte. */
.v6-page .of-arrow{
	width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);
	transition:background .25s ease,color .25s ease;
}
.v6-page .of-arrow:hover{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}

/* La FAQ en coupe sombre : la charte a déjà une coupe nuit, on la réutilise. */
.v6-page .of-faq-sec{background:rgba(var(--v6-bleu-rgb),1)}
.v6-page .of-faq-sec::before{content:none}
.v6-page .of-faq-sec>.container{position:relative;z-index:1}

/* --- 18 bis. LE PORTFOLIO EN COUPE NUIT ----------------------------------
   Le slider déborde volontairement du conteneur (`100vw`) : c'est la seule
   pleine largeur de ces pages, et elle ne marche que si la première carte
   reste alignée sur la colonne de texte. D'où le calcul de rembourrage.
   ⚠️ `95em` est la largeur de contenu retenue pour le site : ⛔ ne pas la
   remplacer par une valeur en pixels, elle suit la taille de police. */
.v6-page .of-pf-head{position:relative;text-align:center;margin-bottom:2.25rem;padding:0 1rem}
.v6-page .of-portfolio .of-eyebrow{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);margin-bottom:.5rem}
.v6-page .of-pf-title{color:var(--v6-blanc);font-weight:700;margin:0}
.v6-page .of-pf-actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.6rem}
@media(max-width:991.98px){
	.v6-page .of-pf-actions{position:static;transform:none;justify-content:center;margin-top:1.1rem}
}
.v6-page .of-arrow.is-hidden{opacity:.35;pointer-events:none}
.v6-page .of-pf-slider{width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.v6-page .of-pf-slider #portfolioSwiper{overflow:hidden;padding-left:max(1rem,calc((100vw - 95em)/2 + .5rem));padding-right:1rem}
.v6-page #portfolioSwiper{overflow:hidden}
.v6-page #portfolioSwiper .swiper-slide{width:300px;height:auto}
.v6-page .portfolio-slide-card{border-radius:var(--v6-r-carte);height:100%;display:flex;flex-direction:column}
.v6-page .portfolio-device-area{display:flex;justify-content:center;align-items:flex-end;padding:1rem .5rem .25rem;position:relative;min-height:150px}
.v6-page .portfolio-slide-card .device-mac{width:100%;max-width:280px;margin:0 auto;position:relative;z-index:1;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.v6-page .portfolio-slide-card:hover .device-mac{transform:scale(1.03)}
.v6-page .portfolio-info{padding:1rem 1.25rem 0;text-align:center}
.v6-page .portfolio-info .badge{
	font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;
	background:rgba(var(--v6-blanc-rgb),.14);color:var(--v6-blanc);
	border:1px solid rgba(var(--v6-blanc-rgb),.24);
	padding:.2rem .6rem;border-radius:.35rem;
}
.v6-page .portfolio-info h3{font-size:.92rem;font-weight:700;color:var(--v6-blanc);margin:.5rem 0 .25rem;line-height:1.3}
.v6-page main .portfolio-info h3 a{color:inherit;text-decoration:none;transition:color .3s}
.v6-page .portfolio-info h3 a:hover{color:var(--v6-orange)}
/* ⚠️ `.pd-muted` est du bleu nuit : posé dans la coupe nuit il tombe à 1,18:1.
   Il y repasse en bleu clair - le même geste que dans `.pd-dark`. */
.v6-page .of-portfolio .portfolio-info p.pd-muted{color:var(--v6-bleu-clair)}

/* La FAQ posée sur la coupe nuit : l'accordéon `.acr-faq` de la charte y est
   clair par défaut, on l'y inverse. */
.v6-page .of-faq-dark .acr-faq-title{display:none}
.v6-page .of-faq-dark .acr-faq{max-width:820px;margin:0 auto;grid-template-columns:1fr}
.v6-page .of-faq-dark .acr-faq-item{background:rgba(var(--v6-blanc-rgb),.06);border:1px solid rgba(var(--v6-blanc-rgb),.16)}
.v6-page .of-faq-dark .acr-faq-item:hover{border-color:rgba(var(--v6-blanc-rgb),.32)}
.v6-page .of-faq-dark .acr-faq-item[open]{border-color:rgba(var(--v6-orange-rgb),.7);box-shadow:none}
.v6-page .of-faq-dark .acr-faq-item>summary{color:var(--v6-blanc)}
.v6-page .of-faq-dark .acr-faq-item>summary::after{color:var(--v6-orange);opacity:1}
.v6-page .of-faq-dark .acr-faq-a{color:var(--v6-bleu-clair)}
.v6-page .of-faq-2col .acr-faq{grid-template-columns:1fr}
@media(min-width:768px){.v6-page .of-faq-2col .acr-faq{grid-template-columns:1fr 1fr;align-items:start;gap:.7rem}}
/* --- L'HABILLAGE DE L'ACCORDEON EN VERSION CLAIRE -------------------------
   ⚠️ `acr_faq()` (php/faq_shortcode.php) injecte lui-meme un habillage SOMBRE
   en ligne, concu pour l'ancienne charte. Sans ces regles, les questions
   sortent nues sur le creme : ni carte, ni filet, ni etat ouvert - c'est ce
   qu'on a mesure sur /faqs. Elles doivent donc rester tant que le raccourci
   injecte son propre style. */
.v6-page .acr-faq{max-width:none;margin:0;gap:.6rem}
.v6-page .acr-faq-title{
	max-width:none;margin:0 0 1.1rem;font-size:1.15rem;font-weight:800;line-height:1.35;
	padding-bottom:.75rem;border-bottom:1px solid var(--v6-line);gap:.6rem;color:var(--v6-bleu);
}
.v6-page .acr-faq-item{
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:var(--v6-r);transition:border-color .2s,box-shadow .2s;
}
.v6-page .acr-faq-item:hover{border-color:var(--v6-orange)}
.v6-page .acr-faq-item[open]{border-color:var(--v6-orange);box-shadow:var(--v6-ombre-s)}
.v6-page .acr-faq-item>summary{color:var(--v6-bleu);padding:.95rem 1.1rem}
/* Le +/- est un GRAPHISME : l'orange y est admis (3,01:1 sur blanc). */
.v6-page .acr-faq-item>summary::after{opacity:1;color:var(--v6-orange)}
.v6-page .acr-faq-a{color:var(--v6-texte);opacity:1}

/* Socle structurel de l'accordéon pour les pages qui composent leur PROPRE
   markup : le raccourci {{faq_*}} injecte le sien, pas elles. */
.v6-page .acr-faq{display:grid}
.v6-page .acr-faq-item{overflow:hidden}
.v6-page .acr-faq-item>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.v6-page .acr-faq-item>summary::-webkit-details-marker{display:none}
.v6-page .acr-faq-item>summary::after{content:"\002B";font-weight:700;transition:transform .2s}
.v6-page .acr-faq-item[open]>summary::after{content:"\2212"}
.v6-page .acr-faq-a{padding:0 1.2rem 1.1rem;line-height:1.6}
.v6-page .acr-faq-a p:last-child{margin-bottom:0}

/* Le témoignage client. ⚠️ Le guillemet ouvrant est décoratif et se pose
   DERRIÈRE le texte : il reste pâle, sinon il concurrence la citation. */
.v6-page .of-quote{
	max-width:820px;margin:0 auto;text-align:center;position:relative;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:var(--v6-r-carte);padding:2.5rem 2rem;box-shadow:var(--v6-ombre);
}
.v6-page .of-quote::before{
	content:"\201C";position:absolute;top:.2rem;left:1.4rem;
	font-size:4rem;line-height:1;font-family:Georgia,serif;
	color:rgba(var(--v6-orange-rgb),.4);
}
.v6-page .of-quote p{font-size:1.22rem;line-height:1.6;font-weight:600;color:var(--v6-bleu);margin:.4rem 0 1rem}
.v6-page .of-quote-cite{font-size:.85rem;color:var(--v6-doux)}
.v6-page .of-quote-cite strong{color:var(--v6-bleu)}
.v6-page main .of-quote-cite a{color:var(--v6-bleu);font-weight:700}

/* Positions des étiquettes flottantes du hero, et bascule mobile : sous
   992 px la grille passe sur une colonne, tout se recentre. */
.v6-page .of-hero-badge.is-tl{top:6%;left:-3%}
.v6-page .of-hero-badge.is-br{bottom:16%;right:-3%}
@media(max-width:991.98px){
	.v6-page .of-hero{padding:3rem 0 2.5rem}
	.v6-page .of-hero-col{text-align:center}
	.v6-page .of-hero-lead{margin-left:auto;margin-right:auto}
	.v6-page .of-audience{justify-content:center}
	.v6-page .of-hero-col .d-flex{justify-content:center}
	.v6-page .of-portfolio-head{justify-content:center;text-align:center}
	.v6-page .of-hero-visual .of-trust{position:static;margin:1.5rem auto 0}
	/* ⚠️ Les étiquettes flottantes sortent du cadre en `-3%` : sur mobile elles
	   débordaient de la page. Elles rentrent. */
	.v6-page .of-hero-badge.is-tl{left:0}
	.v6-page .of-hero-badge.is-br{right:0}
}
@media(max-width:575.98px){.v6-page .of-cta{padding:2.5rem 1.25rem}}

/* --- 18 ter. VOCABULAIRES PROPRES À CHAQUE PAGE D'OFFRE ------------------- */

/* /referencement-seo : les moteurs cités, et la FAQ éditoriale. */
.v6-page .geo-engines{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 0}
.v6-page .geo-chip{
	display:inline-flex;align-items:center;gap:.45rem;
	font-size:.85rem;font-weight:700;color:var(--v6-bleu);
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:50px;padding:.5rem 1rem;box-shadow:var(--v6-ombre-s);
}
.v6-page .geo-chip img{display:block;height:16px;width:auto}
/* 🔴 Les deux accents de l'ancienne charte convergent, ici encore : `is-red` et
   `is-cyan` prenaient un rouge et un cyan, il ne reste que l'orange. */
.v6-page .geo-chip i,
.v6-page .geo-chip.is-red i,
.v6-page .geo-chip.is-cyan i{color:var(--v6-orange);font-size:.9em}
.v6-page .geo-faq{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.v6-page .geo-faq{grid-template-columns:1fr 1fr}}
.v6-page .geo-faq-item{
	border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
	background:rgba(var(--v6-blanc-rgb),1);padding:1.5rem 1.6rem;box-shadow:var(--v6-ombre-s);
}
.v6-page .geo-faq-item h3{font-size:1.02rem;font-weight:800;color:var(--v6-bleu);margin:0 0 .55rem;display:flex;align-items:flex-start;gap:.6rem}
.v6-page .geo-faq-item h3 i{color:var(--v6-orange);font-size:.95em;margin-top:.15rem;flex:0 0 auto}
.v6-page .geo-faq-item p{color:var(--v6-texte);line-height:1.7;margin:0}
/* Le chiffre qui porte l'argument : bleu nuit et gras. ⛔ Pas en orange - un
   nombre est du TEXTE, et l'orange n'y tient que 2,81:1 sur le crème. */
.v6-page .geo-stat{font-weight:800;color:var(--v6-bleu)}

/* /marketplaces : le hub de diffusion. Un schéma, pas une décoration - il dit
   « une source, N canaux », ce qui EST l'argument de la page. */
.v6-page .mk-hub{max-width:920px;margin:0 auto}
.v6-page .mk-core{
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:var(--v6-r-carte);padding:1.6rem 1.4rem;text-align:center;
	box-shadow:var(--v6-ombre);max-width:560px;margin:0 auto;
}
.v6-page .mk-core-title{font-weight:800;font-size:1.1rem;color:var(--v6-bleu);margin:0 0 1rem;display:flex;align-items:center;justify-content:center;gap:.55rem}
.v6-page .mk-core-title i{color:var(--v6-orange)}
.v6-page .mk-sources{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center}
.v6-page .mk-src{
	display:inline-flex;align-items:center;gap:.45rem;
	background:rgba(var(--v6-peche-rgb),.55);border:1px solid var(--v6-line);
	border-radius:50px;padding:.4rem .85rem;font-size:.78rem;font-weight:600;color:var(--v6-texte);
}
.v6-page .mk-src img{height:16px;width:auto;display:block}
.v6-page .mk-flow{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:1.35rem 0}
.v6-page .mk-flow i{font-size:1.5rem;color:var(--v6-orange)}
.v6-page .mk-flow span{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--v6-doux)}
.v6-page .mk-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media(min-width:576px){.v6-page .mk-logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.v6-page .mk-logos{grid-template-columns:repeat(5,1fr)}}
.v6-page .mk-logo-card{
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:var(--v6-r);padding:1.1rem .8rem .95rem;
	display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
	gap:.65rem;min-height:118px;box-shadow:var(--v6-ombre-s);
	transition:transform .25s,box-shadow .25s;
}
.v6-page .mk-logo-card:hover{transform:translateY(-4px);box-shadow:var(--v6-ombre)}
.v6-page .mk-logo-visual{height:38px;display:flex;align-items:center;justify-content:center}
.v6-page .mk-logo-card img{max-height:30px;max-width:100%;width:auto;height:auto;display:block}
.v6-page .mk-logo-card .mk-logo-name{display:flex;align-items:baseline;gap:.3rem;font-size:.82rem;font-weight:800;color:var(--v6-bleu)}
.v6-page .mk-logo-card .mk-logo-tag{font-size:.7rem;font-weight:600;color:var(--v6-doux);text-align:center;line-height:1.3}
.v6-page .mk-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem}
.v6-page .mk-chips .mk-chip{
	display:inline-flex;align-items:center;gap:.4rem;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:50px;padding:.4rem .9rem;font-size:.8rem;font-weight:600;color:var(--v6-texte);
}
.v6-page .mk-chips .mk-chip i{color:var(--v6-orange);font-size:.8em}

/* /association-ia-humain : le visuel du hero. */
.v6-page .ia-hero-card{
	position:relative;z-index:1;width:100%;max-width:440px;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:var(--v6-r-carte);padding:2.25rem 2rem;box-shadow:var(--v6-ombre);text-align:center;
}
.v6-page .ia-hero-card img{display:block;width:100%;max-width:230px;height:auto;margin:0 auto 1.5rem}
.v6-page .ia-hero-duo{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
/* 🔴 « IA » et « Humain » étaient distingués par le bleu et le rouge de
   l'ancienne charte. La v6 n'a qu'un accent : la dualité se dit maintenant par
   la SURFACE - pleine pour l'un, cerclée pour l'autre. Le sens est conservé,
   le contraste aussi (12,9:1 et 5,08:1). */
.v6-page .ia-chip{
	display:inline-flex;align-items:center;gap:.45rem;
	font-size:.82rem;font-weight:700;padding:.45rem .9rem;border-radius:50px;
	background:rgba(var(--v6-peche-rgb),1);color:var(--v6-bleu);border:1px solid transparent;
}
.v6-page .ia-chip i{font-size:.85em}
.v6-page .ia-chip.ia-chip--red{background:transparent;color:var(--v6-bleu);border-color:var(--v6-orange)}
.v6-page .ia-plus{display:inline-flex;align-items:center;font-weight:800;color:var(--v6-bleu);padding:0 .1rem}
@media(max-width:575.98px){.v6-page .ia-hero-card{padding:1.75rem 1.25rem}}
/* La mosaïque de résultats : elle reste sur fond nuit, c'est un écrin pour des
   visuels produits détourés sur blanc. */
.v6-page .ia-hero-mosaic{
	position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;
	padding:.7rem;border-radius:var(--v6-r-carte);
	background:rgba(var(--v6-bleu-rgb),1);border:1px solid rgba(var(--v6-blanc-rgb),.12);
	box-shadow:var(--v6-ombre);
}
.v6-page .ia-hero-mosaic img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.7rem;display:block;background:rgba(var(--v6-blanc-rgb),1)}
.v6-page .ia-hero-mosaic-tag{
	position:absolute;left:50%;bottom:-.85rem;transform:translateX(-50%);
	display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
	background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);
	font-weight:700;font-size:.8rem;line-height:1;padding:.42rem .8rem;
	border-radius:2rem;box-shadow:var(--v6-ombre);
}
.v6-page .ia-hero-mosaic-tag img{width:auto;height:17px;aspect-ratio:auto;border-radius:0;background:none;box-shadow:none}

/* --- 18 quater. LA DÉMONSTRATION ACRO IA, EN COUPE NUIT -------------------
   Ce bloc était DÉJÀ sombre avant la refonte : c'est la seule section du site
   qui montre des visuels produits détourés, et un fond sombre est ce qui les
   fait ressortir. On le garde sombre, mais en BLEU NUIT de la charte, plus le
   quasi-noir + rouge fluo de l'ancienne.

   ⚠️ CE BLOC SERT AUSSI /acro-ia, la page d'atterrissage du produit : elle
   partage exactement le même vocabulaire `aia-*` / `ba-*`. Le repeindre ici
   la sert d'avance.

   🔴 L'ancienne charte opposait un BLEU et un ROUGE FLUO dans les cartes
   d'argument (`aia-arg--blue` / `aia-arg--red`). La v6 n'a qu'un accent : les
   deux variantes convergent vers la même pastille. ⛔ Ne pas réintroduire une
   seconde couleur pour « garder la distinction » : cette distinction ne
   portait aucun sens, les trois arguments sont de même niveau. */
/* 🔴 `.section-dark` EST MORTE, REMPLACEE PAR `.v6-sec` (2026-08-25).
   ----------------------------------------------------------------------
   Son nom MENTAIT : dans l'ancienne charte le site entier etait sombre, et
   elle ne posait que du rythme vertical - elle n'a jamais rien inverse.
   L'avoir prise au mot a deja coute onze blocs de texte blanc sur blanc sur
   /a-propos. Or `.v6-sec` fait EXACTEMENT la meme chose, sous un nom honnete :
   ce n'est donc pas un renommage, c'est une fusion. Un concept, un nom.

   Les 18 pages qui l'utilisaient portent desormais `.v6-sec`.

   ⚠️ L'ALIAS CI-DESSOUS RESTE, et il ne coute rien : quelques pages non
   routees (rachat, produits, l'ancienne reservation) la citent encore, et
   surtout un redacteur peut l'avoir tapee dans une description au back-office.
   ⛔ Ne pas la reintroduire dans un gabarit : elle n'est la que pour ne rien
   casser derriere nous.

   ⛔ `pd-dark` n'a PAS ete renommee, et c'est deliberé : son nom est HONNETE
   (c'est une vraie coupe sombre), et elle est presente dans SIX fiches produit
   en base - donc en production. Renommer aurait exige une migration de donnees
   sur le catalogue vendu, pour un gain nul. */
.v6-page .section-dark{padding:5.5rem 0;position:relative}
@media(max-width:991.98px){.v6-page .section-dark{padding:3.75rem 0}}

/* ⚠️ Sur le TUNNEL, plus serre : l'indicateur d'etapes tient lieu d'en-tete, et
   chaque pixel de vide au-dessus du panier est un pixel de moins pour ce qu'on
   achete. */
.v6-page .acr-tunnel-sec{padding:2.5rem 0 4rem}
.v6-page .acroia-section{
	position:relative;overflow:hidden;color:var(--v6-blanc);
	background:rgba(var(--v6-bleu-rgb),1);
	border-top:1px solid rgba(var(--v6-blanc-rgb),.12);
	border-bottom:1px solid rgba(var(--v6-blanc-rgb),.12);
}
/* ⛔ Les deux halos ronds de l'ancienne section sont supprimés : posés en
   pixels absolus (450 px), ils se faisaient couper net par l'`overflow` sur
   les écrans étroits - la couture qu'on a déjà retirée du hero. */
.v6-page .acroia-section::before,
.v6-page .acroia-section::after{content:none}
.v6-page .acroia-section>.container{position:relative;z-index:2}

.v6-page .acroia-section .section-tag,
.v6-page .of-portfolio .section-tag{
	display:inline-flex;align-items:center;gap:.4rem;
	padding:.3rem .85rem;border-radius:50px;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid transparent;
	font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
	color:var(--v6-bleu);margin-bottom:1rem;
}
.v6-page .section-title{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:700;line-height:1.2;margin-bottom:1rem}
.v6-page .acroia-section .section-title{color:var(--v6-blanc)}
/* 🔴 `.text-gradient` était un dégradé orange → rouge appliqué au TEXTE via
   `-webkit-text-fill-color:transparent`. Sur la coupe nuit il descendait à
   2,4:1 sur sa moitié rouge. Il devient de l'orange plein - 5,09:1 sur le
   bleu nuit - et le remplissage transparent est explicitement annulé, sans
   quoi le texte resterait invisible. */
.v6-page .acroia-section .text-gradient,
.v6-page .of-portfolio .text-gradient{
	background:none;-webkit-text-fill-color:currentColor;
	color:var(--v6-orange);
}
.v6-page .sep-gradient{
	width:60px;height:3px;border-radius:3px;margin-bottom:2rem;
	background:rgba(var(--v6-orange-rgb),1);
}
.v6-page .sep-gradient.mx-auto{margin-left:auto;margin-right:auto}

/* L'étiquette « accès bêta » : une vraie information de disponibilité, elle a
   le droit à sa pastille. ⛔ Son point clignotant est arrêté - une pulsation
   permanente ne dit rien de plus que le mot « limité ». */
.v6-page .acroia-section .aia-badge{
	display:inline-flex;align-items:center;gap:.4rem;
	padding:.35rem .85rem;border-radius:50px;
	background:rgba(var(--v6-orange-rgb),1);border:1px solid transparent;
	font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
	color:var(--v6-bleu);margin-bottom:1.25rem;
}
.v6-page .acroia-section .aia-badge .dot{
	width:6px;height:6px;border-radius:50%;
	background:rgba(var(--v6-bleu-rgb),1);animation:none;
}
.v6-page .aia-headline{font-size:clamp(1.25rem,2.5vw,1.55rem);font-weight:700;color:var(--v6-blanc);line-height:1.35;margin-bottom:1.25rem}
.v6-page .aia-lead{color:var(--v6-bleu-clair);font-size:.88rem;line-height:1.8;margin-bottom:1.75rem}
.v6-page .aia-lead strong{color:var(--v6-blanc)}
.v6-page .aia-checklist{list-style:none;padding:0;margin:0 0 1.75rem;display:flex;flex-direction:column;gap:.6rem}
.v6-page .aia-checklist li{display:flex;align-items:center;gap:.65rem;font-size:.84rem;color:var(--v6-bleu-clair);line-height:1.5}
.v6-page .aia-checklist li i{color:var(--v6-orange);font-size:.7rem;width:18px;text-align:center;flex-shrink:0}

.v6-page .aia-arguments{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.75rem}
.v6-page .aia-arg{
	display:flex;align-items:flex-start;gap:.75rem;padding:.8rem .9rem;
	border-radius:var(--v6-r);border:1px solid rgba(var(--v6-blanc-rgb),.12);
	background:rgba(var(--v6-blanc-rgb),.04);
	transition:border-color .25s,background .25s;
}
.v6-page .aia-arg:hover{background:rgba(var(--v6-blanc-rgb),.08);border-color:rgba(var(--v6-blanc-rgb),.2)}
/* ⚠️ `flex:0 0 auto` : sans lui la pastille se comprime et sort rectangulaire
   dans une carte étroite - le défaut mesuré sur les pastilles du mégamenu. */
.v6-page .aia-arg-ico,
.v6-page .aia-arg--blue .aia-arg-ico,
.v6-page .aia-arg--red .aia-arg-ico{
	width:34px;height:34px;flex:0 0 auto;align-self:flex-start;
	border-radius:9px;display:flex;align-items:center;justify-content:center;
	font-size:.8rem;background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
}
.v6-page .aia-arg-title{font-size:.76rem;font-weight:800;color:var(--v6-blanc);margin-bottom:.15rem}
.v6-page .aia-arg-text{font-size:.7rem;color:var(--v6-bleu-clair);line-height:1.55;margin:0}
.v6-page .aia-arg-text strong{color:var(--v6-blanc)}

.v6-page .aia-metrics{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;font-size:.78rem;color:var(--v6-bleu-clair)}
/* ⚠️ Le chiffre était lui aussi un dégradé sur texte transparent : même
   correction que `.text-gradient`, sinon il disparaît. */
.v6-page .aia-metrics strong{
	background:none;-webkit-text-fill-color:currentColor;
	color:var(--v6-orange);font-weight:800;font-size:.95rem;
}
.v6-page .aia-metric-dot{width:4px;height:4px;border-radius:50%;background:rgba(var(--v6-blanc-rgb),.35)}

.v6-page .aia-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin:1.25rem auto 0;max-width:600px}
@media(max-width:575.98px){.v6-page .aia-gallery{grid-template-columns:repeat(3,1fr)}}
.v6-page .aia-gallery-item{
	aspect-ratio:1/1;border-radius:10px;overflow:hidden;
	border:1px solid rgba(var(--v6-blanc-rgb),.14);
	background:rgba(var(--v6-blanc-rgb),1);
}
.v6-page .aia-gallery-item img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .25s,transform .25s}
.v6-page .aia-gallery-item:hover img{opacity:1;transform:scale(1.08)}
.v6-page .aia-gallery-caption{text-align:center;margin-top:.6rem;font-size:.68rem;color:var(--v6-bleu-clair)}

/* Le comparateur avant / après. Ses repères sont volontairement neutres : la
   poignée et le trait doivent se lire sur N'IMPORTE quelle photo, donc blanc
   et noir, pas une couleur de charte qui se perdrait sur un produit orange. */
.v6-page .ba-wrap{
	--pos:50%;position:relative;width:100%;max-width:600px;margin:0 auto;
	aspect-ratio:1/1;border-radius:var(--v6-r-carte);overflow:hidden;
	border:1px solid rgba(var(--v6-blanc-rgb),.14);box-shadow:var(--v6-ombre);
	background:rgba(var(--v6-blanc-rgb),1) url('../img/bg-damier.gif');
	touch-action:none;user-select:none;
}
.v6-page .ba-handle{color:var(--v6-bleu);background:rgba(var(--v6-blanc-rgb),1);border:1px solid rgba(var(--v6-bleu-rgb),.15)}
.v6-page .ba-label{background:rgba(var(--v6-bleu-rgb),.75);border:1px solid rgba(var(--v6-blanc-rgb),.14);color:var(--v6-blanc)}

/* Le bouton de la démo : c'est le bouton orange de la charte, pas un rouge
   fluo. ⛔ Son balayage interne est conservé (il est en `transform`, donc
   composité) mais son ombre ne s'anime plus - une ombre animée fait vibrer
   tout ce qui est derrière. */
.v6-page .btn-acro-primary{
	background:rgba(var(--v6-orange-rgb),1);border:none;color:var(--v6-bleu);
	font-weight:800;font-size:.9rem;padding:.75rem 2rem;border-radius:50px;
	position:relative;overflow:hidden;box-shadow:var(--v6-ombre);
	transition:transform .25s ease,background .25s ease;
}
.v6-page .btn-acro-primary:hover{background:rgba(var(--v6-orange-bas-rgb),1);color:var(--v6-bleu);transform:translateY(-2px);box-shadow:var(--v6-ombre)}
.v6-page .btn-acro-primary i{margin-right:.5rem}
/* 🔴 `.btn-acro-ink` etait un bouton BLANC CERCLE DE BLANC, dessine pour le
   fond quasi-noir de l'ancienne charte. Pose sur le creme du nouveau hero, il
   sortait invisible - mesure : 1,07:1, un bouton fantome sur la page d'offre la
   plus visitee. Il a donc DEUX etats, et c'est le fond qui porte qui decide :
   bleu nuit cercle de bleu nuit par defaut, blanc dans les coupes sombres.
   ⚠️ Les selecteurs sombres sont a (0,3,0) : ils passent DEVANT la regle
   claire a (0,2,0), quel que soit l'ordre. */
.v6-page .btn-acro-ink{
	background:transparent;border:2px solid var(--v6-bleu);color:var(--v6-bleu);
	font-weight:800;font-size:.9rem;padding:.7rem 1.8rem;border-radius:50px;
	transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.v6-page .btn-acro-ink:hover{background:rgba(var(--v6-bleu-rgb),1);border-color:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}
.v6-page .pd-dark .btn-acro-ink,
.v6-page .of-portfolio .btn-acro-ink,
.v6-page .acroia-section .btn-acro-ink{background:transparent;border-color:rgba(var(--v6-blanc-rgb),.5);color:var(--v6-blanc)}
.v6-page .pd-dark .btn-acro-ink:hover,
.v6-page .of-portfolio .btn-acro-ink:hover,
.v6-page .acroia-section .btn-acro-ink:hover{background:rgba(var(--v6-blanc-rgb),1);border-color:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}
@media(prefers-reduced-motion:reduce){
	.v6-page .btn-acro-primary:hover{transform:none}
	.v6-page .mk-logo-card:hover{transform:none}
	.v6-page .portfolio-slide-card:hover .device-mac{transform:none}
	.v6-page .of-card:hover .of-ico{transform:none}
	.v6-page .aia-gallery-item:hover img{transform:none}
}

/* ==========================================================================
   19. LES PAGES DE ZONE (.zn-*) - /agence-web-{secteur}
   ----------------------------------------------------------------------
   Migrées le 2026-08-25. Ces pages partagent tout le vocabulaire `of-*` et
   `pd-*` de la section 18 : il ne leur manquait que leur signature.

   Et leur signature, c'est le CODE POSTAL comme personnage typographique.
   En France c'est le marqueur d'identité locale (« je suis du 68 »), et il
   porte ici l'argument central : nous sommes au 68720, vous êtes au 68200.
   ⚠️ LES CHIFFRES SONT LE CONTENU, pas une décoration : chiffres tabulaires
   pour qu'ils s'alignent, et ⛔ jamais d'orange sur eux - un nombre est du
   texte, et l'orange n'y tient que 2,81:1 sur le crème.
   ========================================================================== */

.v6-page .zn-repere{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);
	border-radius:var(--v6-r-carte);
	padding:1.9rem 1.75rem 1.5rem;
	box-shadow:var(--v6-ombre);
}
.v6-page .zn-repere-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem 1rem}
.v6-page .zn-pole{min-width:0}
.v6-page .zn-pole-role{
	display:block;font-size:.66rem;font-weight:800;
	letter-spacing:.11em;text-transform:uppercase;
	color:var(--v6-doux);margin-bottom:.35rem;
}
.v6-page .zn-cp{
	display:block;font-variant-numeric:tabular-nums;font-weight:800;
	font-size:clamp(2.1rem,5.2vw,2.9rem);line-height:.95;letter-spacing:-.035em;
	color:var(--v6-bleu);
}
/* Le pôle VISÉ (la ville du visiteur) se distinguait par une couleur d'accent.
   🔴 En v6 l'accent ne peut pas être une lettre : c'est le SURLIGNAGE qui
   marque, le même geste que sur les titres de hero. */
.v6-page .zn-pole.is-cible .zn-cp{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	padding:0 .1em;border-radius:.08em;
	-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.v6-page .zn-pole-ville{display:block;margin-top:.3rem;font-size:.86rem;font-weight:600;line-height:1.25;color:var(--v6-texte)}
/* Le trait qui relie les deux pôles : un segment MESURÉ, pas une flèche - une
   pastille à chaque extrémité. C'est le seul élément graphique du bloc. */
.v6-page .zn-lien{text-align:center;padding:0 .35rem;min-width:5.5rem}
.v6-page .zn-lien-trait{
	display:block;position:relative;height:2px;
	background:repeating-linear-gradient(90deg,rgba(var(--v6-orange-rgb),1) 0 5px,transparent 5px 10px);
}
.v6-page .zn-lien-trait::before,
.v6-page .zn-lien-trait::after{
	content:'';position:absolute;top:50%;
	width:.42rem;height:.42rem;border-radius:50%;
	background:rgba(var(--v6-bleu-rgb),1);
}
.v6-page .zn-lien-trait::before{left:0;transform:translate(-50%,-50%)}
.v6-page .zn-lien-trait::after{right:0;transform:translate(50%,-50%)}
.v6-page .zn-lien-val{
	display:block;margin-bottom:.55rem;white-space:nowrap;
	font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;
	color:var(--v6-texte);
}
/* Variante page départementale : un seul pôle, on est déjà dedans. */
.v6-page .zn-repere-grid.is-solo{grid-template-columns:1fr;text-align:center}
.v6-page .zn-repere-grid.is-solo .zn-cp{font-size:clamp(3.2rem,9vw,4.6rem)}

/* La preuve, sous un filet : le nombre de références RÉELLES. */
.v6-page .zn-preuve{
	margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--v6-line);
	display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
}
.v6-page .zn-preuve-nb{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.6rem;line-height:1;color:var(--v6-bleu)}
.v6-page .zn-preuve-txt{font-size:.9rem;color:var(--v6-texte)}
.v6-page .zn-preuve-note{flex-basis:100%;margin:.5rem 0 0;font-size:.8rem;color:var(--v6-doux)}
@media(max-width:400px){
	.v6-page .zn-repere{padding:1.4rem 1.15rem 1.2rem}
	.v6-page .zn-repere-grid{gap:.4rem .5rem}
}

/* --- Puces de communes : le code postal fait le tri visuel --------------- */
.v6-page .zn-communes{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.v6-page .zn-commune{
	display:inline-flex;align-items:baseline;gap:.4rem;padding:.34rem .68rem;
	border:1px solid var(--v6-line);border-radius:2rem;
	background:rgba(var(--v6-blanc-rgb),1);font-size:.82rem;color:var(--v6-texte);
}
.v6-page .zn-commune-cp{font-variant-numeric:tabular-nums;font-weight:700;font-size:.74rem;color:var(--v6-doux)}
/* ⚠️ `is-client` ENCODE UN FAIT : nous avons un client en ligne dans cette
   commune. La distinction doit rester lisible SANS la couleur - d'où le fond
   pêche ET la graisse, pas seulement une teinte de bordure. */
.v6-page .zn-commune.is-client{
	border-color:var(--v6-orange);
	background:rgba(var(--v6-peche-rgb),1);
	font-weight:700;color:var(--v6-bleu);
}
.v6-page .zn-commune.is-client .zn-commune-cp{color:var(--v6-bleu)}
.v6-page .zn-communes-legende{margin-top:.85rem;font-size:.78rem;color:var(--v6-doux);display:flex;align-items:center;gap:.45rem}
.v6-page .zn-legende-puce{
	width:.7rem;height:.7rem;border-radius:2rem;flex:none;
	border:1px solid var(--v6-orange);background:rgba(var(--v6-peche-rgb),1);
}

/* --- Contexte : chapeau appuyé, le reste au corps courant ---------------- */
.v6-page .zn-contexte p{margin-bottom:1.05rem}
.v6-page .zn-contexte p:first-child{font-size:1.06rem;line-height:1.65;color:var(--v6-texte)}
.v6-page .zn-contexte p:last-child{margin-bottom:0}

/* Le code postal sur les cartes de référence, dans la coupe nuit. */
.v6-page .of-portfolio .zn-ref-cp{font-variant-numeric:tabular-nums;font-weight:700;opacity:.85;margin-right:.35rem}

/* ==========================================================================
   20. LE GABARIT 1/3 + 2/3 AVEC COLONNE COLLANTE
   ----------------------------------------------------------------------
   Porté depuis light.css le 2026-08-25. C'est le gabarit de page intérieure
   du site : blog, boutique, FAQ, résultats de recherche s'en servent tous.
   Le porter ici les débloque toutes d'un coup - c'est la raison pour
   laquelle il vient AVANT les pages qui l'utilisent.

   ⚠️ LE CONTENU EST PREMIER DANS LE DOM, la colonne latérale n'est ramenée à
   gauche qu'en grand écran, par PLACEMENT DE GRILLE. ⛔ Ne pas remettre
   l'aside en premier dans le HTML « pour simplifier le CSS » : sur mobile et
   pour un robot, la page commencerait par un bloc de liens secondaires.
   ========================================================================== */

.v6-page .pd-blog-layout{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:992px){
	.v6-page .pd-blog-layout{grid-template-columns:17.5rem minmax(0,1fr);gap:2.5rem;align-items:start}
	.v6-page .pd-blog-layout>.pd-blog-aside{grid-column:1;grid-row:1}
	.v6-page .pd-blog-layout>.pd-blog-main{grid-column:2;grid-row:1}
}
.v6-page .pd-blog-main{min-width:0}
.v6-page .pd-sticky{position:sticky;top:1rem}

/* --- En-tête de page : titre, chapeau, filet ------------------------------ */
.v6-page .pd-page-head,
.v6-page .pd-blog-head{margin-bottom:1.9rem;padding-bottom:1.2rem;border-bottom:1px solid var(--v6-line)}
.v6-page .pd-page-head h1,
.v6-page .pd-blog-head h1{margin:0;font-size:clamp(2rem,4.5vw,2.9rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--v6-bleu)}
.v6-page .pd-page-intro,
.v6-page .pd-blog-intro{margin:.9rem 0 0;font-size:1.02rem;line-height:1.6;color:var(--v6-texte)}
/* Le compteur de résultats : une information, pas un titre. */
.v6-page .pd-blog-count{margin:.85rem 0 0;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v6-doux)}

/* --- La colonne latérale -------------------------------------------------- */
.v6-page .pd-side{display:grid;gap:1.25rem}
.v6-page .pd-side-widget{
	padding:1.25rem;background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);border-radius:var(--v6-r-carte);
}
.v6-page .pd-side-title{
	margin:0 0 .9rem;padding-bottom:.75rem;border-bottom:1px solid var(--v6-line);
	font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v6-bleu);
}
.v6-page .pd-side-cats{list-style:none;margin:0;padding:0}
.v6-page .pd-side-cats li+li{border-top:1px solid var(--v6-line)}
/* 🔴 `main` DANS LE SELECTEUR, sans quoi ces liens sortent SOULIGNÉS : la
   charte pose un filet de sécurité `.v6-page main a:not([class])` (0,2,2) sur
   les liens éditoriaux venus de la base, et un lien de rubrique n'a pas de
   classe. Le piège a déjà frappé sur les 62 liens du plan du site.
   ⛔ La réponse est toujours d'ajouter `main`, jamais un `!important`. */
.v6-page main .pd-side-cats a{
	display:block;padding:.6rem 0;font-size:.9rem;font-weight:600;
	color:var(--v6-texte);text-decoration:none;
	transition:color .2s ease,padding-left .2s ease;
}
.v6-page main .pd-side-cats a:hover{padding-left:.35rem;color:var(--v6-bleu);text-decoration:none}
.v6-page main .pd-side-cats a.active{color:var(--v6-bleu);font-weight:800}

.v6-page .pd-side-posts{display:grid;gap:1rem}
.v6-page .pd-side-post{display:flex;align-items:flex-start;gap:.8rem}
.v6-page .pd-side-thumb{flex:0 0 auto;display:block;width:60px;height:60px;object-fit:cover;border-radius:.5rem}
.v6-page .pd-side-post-title{display:block;margin:0 0 .25rem;font-size:.84rem;font-weight:600;line-height:1.35}
.v6-page main .pd-side-post-title a{color:var(--v6-bleu);text-decoration:none}
.v6-page main .pd-side-post-title a:hover{color:var(--v6-orange-bas);text-decoration:underline}
.v6-page .pd-side-post-date{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v6-doux)}

/* Produits mis en avant dans la colonne. */
.v6-page .pd-side-prod{display:flex;align-items:center;gap:.85rem;padding:.65rem 0;text-decoration:none}
.v6-page .pd-side-prods>.pd-side-prod+.pd-side-prod{border-top:1px solid var(--v6-line)}
.v6-page .pd-side-prod-img{
	flex:0 0 auto;width:60px;height:60px;object-fit:contain;
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	border-radius:.5rem;padding:.2rem;
}
.v6-page .pd-side-prod-name{display:block;margin:0 0 .2rem;font-size:.84rem;font-weight:600;line-height:1.35;color:var(--v6-bleu)}
.v6-page .pd-side-prod:hover .pd-side-prod-name{color:var(--v6-orange-bas)}
/* ⚠️ Un PRIX est du texte, et un texte qui compte : bleu nuit, pas d'accent.
   L'orange n'y tiendrait que 2,81:1. */
.v6-page .pd-side-prod-price{display:block;font-size:.8rem;font-weight:800;color:var(--v6-bleu)}
.v6-page .pd-side-prod-price del{margin-right:.35rem;font-weight:500;color:var(--v6-doux)}

/* Le bouton de la colonne : bleu nuit plein, il ne concurrence pas le bouton
   orange du contenu principal. */
.v6-page main a.pd-side-cta{
	display:block;margin-top:1rem;padding:.7rem 1rem;border-radius:var(--v6-r);
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc);
	font-size:.82rem;font-weight:800;text-align:center;text-decoration:none;
	transition:background .2s ease;
}
.v6-page main a.pd-side-cta:hover{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);text-decoration:none}
.v6-page .pd-side-note{margin:0;font-size:.85rem;line-height:1.55;color:var(--v6-doux)}

/* La variante SOMBRE d'un encart de colonne. ⚠️ Le fond DOIT être redéclaré :
   `.pd-side-widget` pose un fond blanc, et `.pd-dark` seul ne le remplace pas
   toujours selon l'ordre - on écrit les deux classes ensemble. */
.v6-page .pd-side-widget.pd-dark{background:rgba(var(--v6-bleu-rgb),1);border-color:transparent;color:var(--v6-blanc)}
.v6-page .pd-side-widget.pd-dark .pd-side-title{color:var(--v6-blanc);border-bottom-color:rgba(var(--v6-blanc-rgb),.2)}
.v6-page .pd-side-widget.pd-dark .pd-side-note{color:var(--v6-bleu-clair)}
.v6-page main .pd-side-widget.pd-dark a.pd-side-cta{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}
.v6-page main .pd-side-widget.pd-dark a.pd-side-cta:hover{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}

@media(prefers-reduced-motion:reduce){
	.v6-page main .pd-side-cats a{transition:color .2s ease}
	.v6-page main .pd-side-cats a:hover{padding-left:0}
}

/* ==========================================================================
   21. LES RÉALISATIONS (.pd-rea-*) - /realisations et la fiche projet
   ----------------------------------------------------------------------
   Portées depuis light.css le 2026-08-25. La GÉOMÉTRIE est reprise à
   l'identique - ⛔ on ne redessine pas un portfolio qui fonctionne pour le
   plaisir de le redessiner - seules les couleurs passent aux jetons v6.

   Le parti pris d'origine, qui tient toujours : AUCUNE surface intermédiaire
   autour de la capture. Le MacBook est déjà un cadre ; une carte blanche en
   ferait un deuxième et son fond un troisième. Le châssis pose sur le fond
   de page, une ombre au sol l'ancre, une simple ligne sépare deux projets.

   ⚠️ Les corrections de jugement - tout ce que la conversion mécanique ne
   pouvait pas trancher - sont regroupées en 21 bis, après les règles
   portées, pour qu'on voie d'un coup d'œil ce qui a demandé un arbitrage.
   ========================================================================== */

/* --- Le châssis d'appareil en clair --------------------------------------
   Le châssis est un OBJET (aluminium brossé), pas une surface d'interface :
   il reste gris-bleu, quasi monochrome. ⛔ Aucune règle `.device-*` n'est
   réécrite, on ne redéfinit que les jetons déclarés par theme.css - c'est ce
   qui évite d'avoir deux définitions du même mockup à maintenir. */
.v6-page{
	--dev-shell-hi:#E4EAF0;		/* arête éclairée */
	--dev-shell-mid:#C0CBD8;	/* corps */
	--dev-shell-lo:#96A4B4;		/* ombre propre */
	--dev-shell-edge:rgba(var(--v6-bleu-rgb),.16);
	--dev-shell-notch:rgba(var(--v6-bleu-rgb),.18);
	--dev-shell-shadow:0 16px 34px rgba(var(--v6-bleu-rgb),.16);
	--dev-shell-shadow-sm:0 14px 28px rgba(var(--v6-bleu-rgb),.15);
	--dev-shell-shadow-base:0 10px 22px rgba(var(--v6-bleu-rgb),.13);
	/* ⚠️ CES TROIS-LÀ SONT DES COULEURS D'OBJET, PAS DES COULEURS DE CHARTE, et
	   c'est la seule raison pour laquelle elles sont écrites en dur. La dalle
	   éteinte d'un téléphone est noire dans le monde réel ; la peindre en bleu
	   nuit ferait un écran allumé. Le point « en ligne » est un signal d'état :
	   il doit rester vert même si la charte change. ⛔ Ne pas les remplacer par
	   des jetons de charte, et ⛔ ne pas s'en servir ailleurs. */
	--v6-dalle:#121212;
	--v6-cerclage:#000;
	--v6-en-ligne:#1A9E5F;
}

/* --- Les regles portees, geometrie a l'identique --- */
.v6-page .device-mac-camera{background:rgba(16,53,89,.35);box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.v6-page .device-glare{opacity:.45}
.v6-page .pd-rea-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:2rem 2.6rem;padding:2.4rem 0;border-top:1px solid var(--v6-line)}
.v6-page .pd-rea-row:first-of-type{border-top:0;padding-top:.4rem}
.v6-page .pd-rea-row:nth-of-type(even) .pd-rea-visual{order:2}
.v6-page .pd-rea-row:nth-of-type(even) .pd-rea-body{order:1}
.v6-page .pd-rea-visual{display:block;position:relative;text-decoration:none}
.v6-page .pd-rea-visual .device{margin:0;display:block;user-select:none}
.v6-page .pd-rea-visual .device-mac{width:100%;max-width:none;transition:transform .45s cubic-bezier(.25,.46,.45,.94)}
.v6-page .pd-rea-row:hover .pd-rea-visual .device-mac{transform:translateY(-6px)}
.v6-page .pd-rea-visual::after{content:"";position:absolute;left:8%;right:8%;bottom:-12px;height:22px;border-radius:50%;background:var(--v6-line);filter:blur(13px);z-index:0;transition:opacity .45s ease}
.v6-page .pd-rea-row:hover .pd-rea-visual::after{opacity:.65}
.v6-page .pd-rea-body{min-width:0}
.v6-page .pd-rea-idline{display:flex;align-items:center;gap:1.1rem}
.v6-page .pd-rea-id{min-width:0}
.v6-page .pd-rea-logo{flex:0 0 auto;display:block;height:56px;width:auto;max-width:150px;object-fit:contain;object-position:left center;margin:0;transition:transform .35s cubic-bezier(.25,.46,.45,.94)}
.v6-page .pd-rea-row:hover .pd-rea-logo{transform:scale(1.04)}
.v6-page .pd-rea-title{margin:0;font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:800;line-height:1.12;letter-spacing:-.02em}
/* 🔴 `main` DANS CES TROIS SELECTEURS, ET C'EST INDISPENSABLE.
   La charte pose un filet de securite sur les liens editoriaux venus de la
   base : `.v6-page main a:not([class])` (0,2,2), qui les souligne en orange.
   Le nom d'un client et sa rubrique sont des liens SANS classe (c'est le
   parent qui porte `.pd-rea-title`) : ils tombaient donc dedans, et les 21
   titres de /realisations sortaient tous soulignes - `.v6-page .pd-rea-title a`
   (0,2,1) ne suffit pas a l'annuler.
   ⚠️ Meme piege partout ou un composant enveloppe un lien nu. ⛔ La reponse
   est toujours la specificite, jamais un `!important`. */
.v6-page main .pd-rea-title a{color:var(--v6-bleu);text-decoration:none;transition:color .25s ease}
.v6-page .pd-rea-title a:hover{color:var(--v6-bleu)}
.v6-page .pd-rea-kicker{margin:.35rem 0 0;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--v6-texte)}
.v6-page main .pd-rea-kicker a{color:inherit;text-decoration:none}
.v6-page .pd-rea-kicker a:hover{color:var(--v6-bleu)}
.v6-page .pd-rea-mission{margin:1.1rem 0 0;font-size:1rem;font-weight:600;line-height:1.5;color:var(--v6-texte)}
.v6-page .pd-rea-excerpt{margin:.5rem 0 0;font-size:.93rem;line-height:1.65;color:var(--v6-doux)}
.v6-page .pd-rea-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin:1.05rem 0 0;font-size:.78rem;color:var(--v6-doux)}
.v6-page .pd-rea-meta i{margin-right:.35rem;font-size:.72rem;color:var(--v6-doux)}
.v6-page .pd-rea-dot{color:rgba(16,53,89,.78)}
.v6-page .pd-rea-more{position:relative;display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;padding-bottom:.25rem;font-size:.95rem;font-weight:800;color:var(--v6-bleu);text-decoration:none}
.v6-page .pd-rea-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:.4;transform-origin:left;transition:opacity .3s ease,height .3s ease}
.v6-page .pd-rea-row:hover .pd-rea-more::after{opacity:1;height:2.5px}
.v6-page .pd-rea-more:focus-visible{outline:2px solid var(--v6-orange);outline-offset:4px;border-radius:2px}
.v6-page .pd-rea-more i{transition:transform .25s ease}
.v6-page .pd-rea-row:hover .pd-rea-more i{transform:translateX(4px)}
@media(max-width:991.98px){
	.v6-page .pd-rea-row{grid-template-columns:1fr;gap:1.1rem;padding:1.9rem 0}
	.v6-page .pd-rea-row:nth-of-type(even) .pd-rea-visual,
	.v6-page .pd-rea-row:nth-of-type(even) .pd-rea-body{order:0}
	.v6-page .pd-rea-visual .device-mac{width:100%}
	.v6-page .pd-rea-visual::after{left:12%;right:12%;bottom:-8px;height:16px;filter:blur(10px)}
	.v6-page .pd-rea-idline{gap:.85rem}
	.v6-page .pd-rea-logo{height:44px;max-width:110px}
	.v6-page .pd-rea-kicker{margin-top:.25rem;font-size:.66rem;letter-spacing:.12em}
	.v6-page .pd-rea-mission{margin-top:.85rem;font-size:.95rem}
	.v6-page .pd-rea-excerpt{font-size:.89rem}
	.v6-page .pd-rea-meta{margin-top:.8rem;gap:.28rem .45rem;font-size:.74rem}
	.v6-page .pd-rea-more{margin-top:.9rem;min-height:44px}
}
@media(max-width:575.98px){
	.v6-page .pd-rea-row{padding:1.5rem 0;gap:.9rem}
	.v6-page .pd-rea-title{font-size:1.25rem}
	.v6-page .pd-rea-logo{height:38px;max-width:88px}
	.v6-page .pd-rea-idline{gap:.7rem}
}
@media(prefers-reduced-motion:reduce){
	.v6-page .pd-rea-visual .device-mac,
	.v6-page .pd-rea-visual::after,
	.v6-page .pd-rea-logo,
	.v6-page .pd-rea-more::after,
	.v6-page .pd-rea-more i{transition:none}
	.v6-page .pd-rea-row:hover .pd-rea-visual .device-mac,
	.v6-page .pd-rea-row:hover .pd-rea-logo{transform:none}
}
.v6-page .pd-rea-head,
.v6-page .pd-page-head{margin-bottom:1.9rem;padding-bottom:1.2rem;border-bottom:1px solid var(--v6-line)}
.v6-page .pd-rea-head h1,
.v6-page .pd-page-head h1{margin:0;font-size:clamp(2rem,4.5vw,2.9rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--v6-bleu)}
.v6-page .pd-rea-intro,
.v6-page .pd-page-intro{margin:.9rem 0 0;font-size:1.02rem;line-height:1.6;color:var(--v6-doux)}
.v6-page .pd-rea-empty{padding:2.5rem 1.5rem;border:1px dashed var(--v6-line);border-radius:.85rem;text-align:center;color:var(--v6-doux);background:rgba(255,255,255,.6)}
.v6-page .pd-rea-hero{position:relative;overflow:hidden;isolation:isolate;padding:3.2rem 0 3.6rem}
.v6-page .pd-rea-hero::before{content:"";position:absolute;z-index:-2;top:-30%;left:-10%;width:70%;height:140%;background:radial-gradient(closest-side,rgba(var(--v6-orange-rgb),.16),transparent 100%);filter:blur(10px);animation:pdReaDrift 22s ease-in-out infinite alternate}
.v6-page .pd-rea-hero::after{content:"";position:absolute;z-index:-2;right:-15%;bottom:-45%;width:65%;height:130%;background:radial-gradient(closest-side,rgba(var(--v6-orange-rgb),.09),transparent 100%);filter:blur(10px);animation:pdReaDrift 28s ease-in-out infinite alternate-reverse}
.v6-page .pd-rea-hero-dots{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--v6-line) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 72%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 72%)}
.v6-page .pd-rea-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:2rem 3.2rem}
.v6-page .pd-rea-hero-txt{display:flex;flex-direction:column;align-items:flex-start}
.v6-page .pd-rea-hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0 0 1.1rem;font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--v6-doux)}
.v6-page main .pd-rea-hero-eyebrow a{color:var(--v6-bleu);text-decoration:none}
.v6-page main .pd-rea-hero-eyebrow a:hover{text-decoration:underline}
.v6-page .pd-rea-live{display:inline-flex;align-items:center;gap:.4rem;color:var(--v6-doux)}
.v6-page .pd-rea-live i{width:.45rem;height:.45rem;border-radius:50%;background:#1a9e5f;box-shadow:0 0 0 0 rgba(26,158,95,.55);animation:pdReaPulse 2.4s ease-out infinite}
.v6-page .pd-rea-h1{margin:0;font-size:clamp(2rem,3.8vw,3rem);font-weight:800;line-height:1.04;letter-spacing:-.03em;color:var(--v6-bleu)}
.v6-page .pd-rea-client{margin:.3rem 0 0;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--v6-doux)}
.v6-page .pd-rea-hero .pd-rea-idline{margin:0 0 1rem;gap:1.15rem}
.v6-page .pd-rea-hero .pd-rea-logo{height:66px;max-width:170px}
.v6-page .pd-rea-hero .pd-rea-mission{margin:0 0 1.6rem;font-size:1.14rem;font-weight:500}
.v6-page .pd-rea-strip{display:flex;flex-wrap:wrap;gap:.9rem 0;width:100%;margin:0 0 1.7rem;padding:1.05rem 0;border-top:1px solid var(--v6-line);border-bottom:1px solid var(--v6-line)}
.v6-page .pd-rea-strip-item{flex:1 1 0;min-width:8.5rem;padding:0 1.15rem}
.v6-page .pd-rea-strip-item:first-child{padding-left:0}
.v6-page .pd-rea-strip-item+.pd-rea-strip-item{border-left:1px solid var(--v6-line)}
.v6-page .pd-rea-strip-k{display:block;margin:0 0 .3rem;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--v6-doux)}
.v6-page .pd-rea-strip-v{display:block;font-size:.95rem;font-weight:700;line-height:1.35;color:var(--v6-bleu)}
.v6-page .pd-rea-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.6rem}
.v6-page main a.pd-rea-visit{display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:.68rem 1.5rem;border:1.5px solid rgba(var(--v6-bleu-rgb),1);border-radius:.55rem;background:transparent;color:var(--v6-bleu);font-size:.94rem;font-weight:700;text-decoration:none;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.v6-page a.pd-rea-visit:hover{background:var(--v6-line);color:var(--v6-bleu);transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--v6-bleu-rgb),.14)}
.v6-page a.pd-rea-visit:focus-visible{outline:2px solid var(--v6-orange);outline-offset:3px}
.v6-page .pd-rea-visit i{font-size:.85rem}
.v6-page .pd-rea-actions .pd-rea-more{margin-top:0;min-height:46px}
.v6-page .pd-rea-hero-txt>*{animation:pdReaIn .55s cubic-bezier(.22,.61,.36,1) both}
.v6-page .pd-rea-hero-txt>*:nth-child(1){animation-delay:.04s}
.v6-page .pd-rea-hero-txt>*:nth-child(2){animation-delay:.10s}
.v6-page .pd-rea-hero-txt>*:nth-child(3){animation-delay:.16s}
.v6-page .pd-rea-hero-txt>*:nth-child(4){animation-delay:.22s}
.v6-page .pd-rea-hero-txt>*:nth-child(5){animation-delay:.28s}
.v6-page .pd-rea-scene{position:relative}
.v6-page .pd-rea-scene::after{content:"";position:absolute;left:6%;right:6%;bottom:-6px;height:26px;border-radius:50%;background:var(--v6-line);filter:blur(15px);z-index:0}
.v6-page .pd-rea-scene .device-stage{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;padding-bottom:1rem;pointer-events:none}
.v6-page .pd-rea-scene .device{position:relative;z-index:1;pointer-events:auto;user-select:none;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.v6-page .pd-rea-scene .device-phone{position:absolute;left:20px;bottom:0;z-index:5;width:150px}
.v6-page .pd-rea-scene .device-phone-body{position:relative;aspect-ratio:9/19.5;border-radius:32px;transition:border-radius .3s ease,box-shadow .3s ease}
.v6-page .pd-rea-scene .device-phone-bezel{position:absolute;inset:8px;z-index:1;border-radius:24px;background:#000}
.v6-page .pd-rea-scene .device-phone .device-screen{position:absolute;inset:10px;z-index:2;border-radius:22px;overflow:hidden;background:#121212;scrollbar-width:none}
.v6-page .pd-rea-scene .device-phone-island{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:35%;height:20px;z-index:20;border-radius:20px;background:#000}
.v6-page .pd-rea-scene .device-mac{position:relative;z-index:1;width:min(650px,90%)}
.v6-page .pd-rea-scene .device-mac-lid{position:relative;aspect-ratio:16/10;border-radius:18px}
.v6-page .pd-rea-scene .device-mac-lid::before{content:"";position:absolute;inset:10px;bottom:14px;border-radius:10px;background:#000}
.v6-page .pd-rea-scene .device-mac .device-screen{position:absolute;inset:11px;bottom:15px;border-radius:9px;overflow:hidden;background:#121212;scrollbar-width:none}
.v6-page .pd-rea-scene .device-mac-camera{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:6px;height:6px;z-index:20;border-radius:50%}
.v6-page .pd-rea-scene .device-mac-base{position:relative;left:-2%;width:104%;height:16px;margin-top:-8px;z-index:2;border-radius:2px 2px 12px 12px}
.v6-page .pd-rea-scene .device-mac-base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:15%;height:6px;border-radius:0 0 6px 6px}
.v6-page .pd-rea-scene .device-shot{display:block;position:static;width:100%;height:auto;will-change:scroll-position;cursor:pointer}
@media(hover:hover){
	.v6-page .pd-rea-scene .device-phone:hover{transform:scale(1.08) translateY(-10px);z-index:30}
	.v6-page .pd-rea-scene .device-phone:hover ~ .device-mac{transform:scale(.95) translateX(20px);opacity:.8}
	.v6-page .pd-rea-scene .device-mac:hover{transform:scale(1.02);z-index:20}
}
@media(max-width:1024px){
	.v6-page .pd-rea-scene .device-phone{position:relative;left:auto;bottom:auto;width:25%;max-width:120px;margin-right:-10%;margin-bottom:-5px}
	.v6-page .pd-rea-scene .device-mac{width:85%}
	.v6-page .pd-rea-scene .device-phone-body{border-radius:16px}
	.v6-page .pd-rea-scene .device-phone-bezel{inset:5px;border-radius:12px}
	.v6-page .pd-rea-scene .device-phone .device-screen{inset:6px;border-radius:10px}
	.v6-page .pd-rea-scene .device-phone-island{top:10px;height:12px}
}
@media(prefers-reduced-motion:reduce){
	.v6-page .pd-rea-scene .device,
	.v6-page .pd-rea-scene .device-phone:hover,
	.v6-page .pd-rea-scene .device-mac:hover,
	.v6-page .pd-rea-scene .device-phone:hover ~ .device-mac{transition:none;transform:none}
}
.v6-page .pd-rea-block{margin:0 0 2.4rem}
.v6-page .pd-rea-block+.pd-rea-block{padding-top:2.2rem;border-top:1px solid var(--v6-line)}
.v6-page .pd-rea-h2{margin:0 0 1.1rem;font-size:clamp(1.25rem,2vw,1.55rem);font-weight:800;letter-spacing:-.015em;color:var(--v6-bleu)}
.v6-page .pd-rea-recap{padding:.2rem 0 .2rem 1.1rem;border-left:3px solid rgba(var(--v6-orange-rgb),.85);font-size:1.05rem;font-weight:500;line-height:1.6;color:var(--v6-texte)}
.v6-page .pd-rea-prose{font-size:1.02rem;line-height:1.75;color:var(--v6-texte)}
.v6-page .pd-rea-prose p{margin:0 0 1.1rem}
.v6-page .pd-rea-prose p:last-child{margin-bottom:0}
.v6-page .pd-rea-prose h3{margin:1.6rem 0 .8rem;font-size:1.12rem;font-weight:800;color:var(--v6-bleu)}
.v6-page .pd-rea-prose ul{list-style:none;margin:.6rem 0 1.1rem;padding:0}
.v6-page .pd-rea-prose ul li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;line-height:1.6}
.v6-page .pd-rea-prose ul li::before{content:"";position:absolute;left:.35rem;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:rgba(var(--v6-orange-rgb),.9)}
.v6-page .pd-rea-prose a{color:var(--v6-bleu)}
.v6-page .rea-wysiwyg .rea-acc{margin-top:1.2rem;border-top:1px solid var(--v6-line)}
.v6-page .rea-wysiwyg .rea-acc-item{border-bottom:1px solid var(--v6-line)}
.v6-page .rea-wysiwyg .rea-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;background:transparent;border:0;text-align:left;cursor:pointer;font:inherit;font-size:1.02rem;font-weight:700;color:var(--v6-bleu)}
/* ⚠️ Le survol repondait par la MEME couleur qu'au repos, donc par rien du
   tout. Un accordeon doit dire qu'il est cliquable : soulignement orange, et
   la pastille du signe se teinte. */
.v6-page .rea-wysiwyg .rea-acc-btn:hover{color:var(--v6-bleu);text-decoration:underline;text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:3px}
.v6-page .rea-wysiwyg .rea-acc-btn:hover .rea-acc-ico{background:rgba(var(--v6-orange-rgb),1)}
.v6-page .rea-wysiwyg .rea-acc-btn:focus-visible{outline:2px solid var(--v6-orange);outline-offset:2px;border-radius:2px}
.v6-page .rea-wysiwyg .rea-acc-ico{flex:0 0 auto;position:relative;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--v6-line)}
/* 🔴 CETTE DECLARATION ETAIT INVALIDE, ET INVISIBLEMENT : elle contenait un
   CARACTERE DE CONTROLE (0x01) en guise d'alpha - un `rgba()` dont l'alpha etait cet octet.
   Vestige du portage automatique : la reference arriere de la substitution a ete
   avalee par le shell et remplacee par l'octet 1. Les deux barres du signe + / −
   de l'accordeon n'etaient donc PAS peintes : l'accordeon s'ouvrait, mais rien
   n'indiquait qu'il etait ouvrable.
   ⚠️ UN OCTET DE CONTROLE NE SE VOIT PAS DANS UN EDITEUR, ne casse pas la
   feuille, et n'apparait dans aucune sonde de contraste - l'element est
   simplement absent. Un balayage de tous les fichiers touches a confirme que
   c'etait le seul. ⛔ Ne jamais ecrire une reference arriere de type backslash-1 dans un
   remplacement passe par un heredoc de shell : utiliser une lambda. */
.v6-page .rea-wysiwyg .rea-acc-ico::before,
.v6-page .rea-wysiwyg .rea-acc-ico::after{content:"";position:absolute;background:rgba(var(--v6-bleu-rgb),1);border-radius:2px}
.v6-page .rea-wysiwyg .rea-acc-ico::before{width:11px;height:2px}
.v6-page .rea-wysiwyg .rea-acc-ico::after{width:2px;height:11px;transition:transform .2s ease}
.v6-page .rea-wysiwyg .rea-acc-item.is-open .rea-acc-ico::after{transform:scaleY(0)}
.v6-page .rea-wysiwyg .rea-acc-panel{overflow:hidden;max-height:0;padding:0;transition:max-height .25s ease;color:var(--v6-texte)}
.v6-page .rea-wysiwyg .rea-acc-item.is-open .rea-acc-panel{padding:0 0 1.2rem}
.v6-page .pd-rea-facts{list-style:none;margin:0;padding:0;font-size:.88rem}
.v6-page .pd-rea-facts li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.15rem 1rem;padding:.6rem 0;border-bottom:1px solid var(--v6-line)}
.v6-page .pd-rea-facts li:last-child{border-bottom:0;padding-bottom:0}
.v6-page .pd-rea-facts span{flex:0 0 auto;color:var(--v6-doux)}
.v6-page .pd-rea-facts strong{flex:1 1 auto;text-align:right;font-weight:700;color:var(--v6-bleu)}
.v6-page .pd-rea-back{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:700;color:var(--v6-bleu);text-decoration:none}
.v6-page .pd-rea-back:hover{text-decoration:underline}
@media(max-width:1199.98px){
	.v6-page .pd-rea-hero-grid{grid-template-columns:1fr;gap:2.2rem}
}
@media(max-width:991.98px){
	.v6-page .pd-rea-hero{padding:2rem 0 2.4rem}
	.v6-page .pd-rea-hero .pd-rea-logo{height:48px;max-width:120px}
	.v6-page .pd-rea-hero .pd-rea-idline{gap:.85rem;margin-bottom:.85rem}
	.v6-page .pd-rea-hero .pd-rea-mission{margin-bottom:1.3rem;font-size:1.02rem}
	.v6-page .pd-rea-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:.95rem 0}
	.v6-page .pd-rea-strip-item,
	.v6-page .pd-rea-strip-item:first-child{padding:0}
	.v6-page .pd-rea-strip-item+.pd-rea-strip-item{border-left:0}
	.v6-page .pd-rea-actions{width:100%}
	.v6-page a.pd-rea-visit{flex:1 1 auto;justify-content:center;min-height:44px}
	.v6-page .pd-rea-block{margin-bottom:2rem}
	.v6-page .pd-rea-block+.pd-rea-block{padding-top:1.8rem}
}
@media(max-width:575.98px){
	.v6-page .pd-rea-strip-v{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){
	.v6-page .pd-rea-hero::before,
	.v6-page .pd-rea-hero::after,
	.v6-page .pd-rea-live i,
	.v6-page .pd-rea-hero-txt>*{animation:none}
	.v6-page a.pd-rea-visit{transition:none}
	.v6-page a.pd-rea-visit:hover{transform:none}
}

/* --- 21 bis. LES ARBITRAGES ----------------------------------------------
   Tout ce qui suit corrige une décision que la conversion mécanique ne
   pouvait pas prendre. Elles sont ici, après les règles portées, et pas
   fondues dedans : on doit pouvoir lire d'un trait ce qui a demandé un
   jugement, et pourquoi.

   🔴 LE FIL ROUGE : l'ancienne charte avait DEUX accents (un bleu, un rouge)
   et s'en servait AUSSI pour écrire. La v6 n'en a qu'un, et il ne peut pas
   écrire - #FF611C sur le crème donne 2,81:1. Partout où un lien était
   « bleu accent », il devient bleu nuit SOULIGNÉ D'ORANGE : l'accent reste
   visible, mais en graphisme, là où 3:1 suffit. */

/* Un lien de portfolio doit se lire comme un lien SANS survol : un lien qui
   n'apparaît qu'au passage de la souris est invisible au clavier, au tactile,
   et pour un audit. D'où le soulignement permanent - il s'épaissit au survol,
   il n'apparaît pas. */
.v6-page .pd-rea-more::after{background:rgba(var(--v6-orange-rgb),1);opacity:.75}
.v6-page .pd-rea-row:hover .pd-rea-more::after{opacity:1;height:3px}

/* Le nom du client et sa rubrique : au survol, c'est le soulignement orange
   qui répond. ⛔ Pas un changement de couleur du texte : la conversion les
   avait rendus identiques au repos et au survol, donc sans aucun retour. */
.v6-page main .pd-rea-title a:hover,
.v6-page main .pd-rea-kicker a:hover,
.v6-page main .pd-rea-back:hover,
.v6-page main .pd-rea-hero-eyebrow a:hover{
	color:var(--v6-bleu);
	text-decoration:underline;text-decoration-color:var(--v6-orange);
	text-decoration-thickness:2px;text-underline-offset:3px;
}
/* Les liens DANS le texte rédigé d'une fiche projet : soulignés en
   permanence, comme partout ailleurs dans du corps de texte. */
.v6-page main .pd-rea-prose a{
	color:var(--v6-bleu);text-decoration:underline;
	text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:2px;
}

/* L'ombre au sol. ⚠️ Elle était tombée en `--v6-line`, c'est-à-dire en BEIGE
   sur du crème : le MacBook flottait sans assise. Une ombre est du bleu nuit
   très dilué, jamais un filet. */
.v6-page .pd-rea-visual::after{background:rgba(var(--v6-bleu-rgb),.16)}
/* La caméra : un point noir dur ferait une tache sur un capot clair. */
.v6-page .device-mac-camera{
	background:rgba(var(--v6-bleu-rgb),.35);
	box-shadow:0 0 0 1px rgba(var(--v6-blanc-rgb),.45);
}
/* Les points médians de la ligne de méta sont PUREMENT décoratifs (ils portent
   `aria-hidden`), mais on les tient quand même au seuil : une sonde de
   contraste ne fait pas la différence, et un audit non plus. */
.v6-page .pd-rea-dot{color:var(--v6-doux)}

/* Le bouton « voir le site en ligne » : au survol il se REMPLIT de bleu nuit.
   ⚠️ La conversion l'avait rempli de `--v6-line` - un beige sur du crème, soit
   un survol qu'on ne voit pas. L'inversion complète, elle, se lit d'un coup
   d'œil, et le rapport reste le même puisque ce sont les deux mêmes couleurs
   qui s'échangent. */
.v6-page main a.pd-rea-visit:hover{
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc);
	border-color:rgba(var(--v6-bleu-rgb),1);
	box-shadow:var(--v6-ombre);
}
/* Les couleurs d'objet, reprises des jetons déclarés plus haut. */
.v6-page .pd-rea-scene .device-phone-bezel,
.v6-page .pd-rea-scene .device-phone-island,
.v6-page .pd-rea-scene .device-mac-lid::before{background:var(--v6-cerclage)}
.v6-page .pd-rea-scene .device-phone .device-screen,
.v6-page .pd-rea-scene .device-mac .device-screen{background:var(--v6-dalle)}
.v6-page .pd-rea-live i{background:var(--v6-en-ligne);box-shadow:0 0 0 0 rgba(26,158,95,.55)}

/* ==========================================================================
   22. LE BLOG (.pd-post-*, .pd-article-*, .pd-read-*)
   ----------------------------------------------------------------------
   Porté depuis light.css le 2026-08-25. Géométrie reprise à l'identique, le
   gabarit deux colonnes vient de la section 20.

   ⛔ AUCUN TIRET DÉCORATIF EN `::before` devant un surtitre. Il a été retiré
   du projet le 2026-07-23 et ne doit revenir nulle part : ce petit trait
   plein devant des capitales est la signature visuelle des maquettes
   générées, au même titre que le tiret cadratin dans les textes. Le point
   médian entre rubrique et date suffit.

   ⚠️ `.pd-article-body` habille du CONTENU RÉDIGÉ AU BACK-OFFICE. Ses règles
   doivent rester tolérantes : elles reçoivent du HTML qu'un rédacteur a
   composé dans GrapesJS, pas un markup qu'on maîtrise. D'où des sélecteurs
   sur les balises nues (`h3`, `ul li`, `a`) et non sur des classes.
   ========================================================================== */
.v6-page .pd-blog-count{margin:.85rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--v6-bleu)}
.v6-page .pd-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin:0 0 .7rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.v6-page main .pd-eyebrow a{color:var(--v6-bleu);text-decoration:none}
.v6-page .pd-eyebrow a:hover{color:var(--v6-bleu)}
.v6-page .pd-eyebrow time{font-weight:600;letter-spacing:.06em;color:var(--v6-doux)}
.v6-page .pd-eyebrow time::before{content:"\00b7";margin-right:.55rem;color:rgba(var(--v6-bleu-rgb),.5)}
.v6-page .pd-eyebrow-flag{color:var(--v6-bleu)}
.v6-page .pd-eyebrow-flag::after{content:"\00b7";margin-left:.55rem;color:rgba(var(--v6-bleu-rgb),.5)}
.v6-page .pd-post{display:flex;flex-direction:column;overflow:hidden;background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:.85rem;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.v6-page .pd-post:hover{transform:translateY(-3px);border-color:rgba(var(--v6-orange-rgb),.3);box-shadow:0 14px 34px rgba(var(--v6-bleu-rgb),.11)}
.v6-page .pd-post-media{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--v6-line)}
.v6-page .pd-post-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.v6-page .pd-post:hover .pd-post-media img{transform:scale(1.05)}
.v6-page .pd-post-body{display:flex;flex-direction:column;flex:1 1 auto;padding:1.15rem 1.25rem 0}
.v6-page .pd-post-title{margin:0;font-size:1.06rem;font-weight:700;line-height:1.35;letter-spacing:-.005em}
.v6-page main .pd-post-title a{color:var(--v6-bleu);text-decoration:none}
.v6-page .pd-post:hover .pd-post-title a{color:var(--v6-bleu)}
.v6-page .pd-post-excerpt{margin:.6rem 0 0;font-size:.89rem;line-height:1.6;color:var(--v6-doux)}
.v6-page .pd-post-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.15rem;padding:.85rem 1.25rem;border-top:1px solid var(--v6-line)}
.v6-page .pd-post-more{font-size:.82rem;font-weight:700;color:var(--v6-bleu);text-decoration:none;white-space:nowrap}
.v6-page .pd-post-more i{margin-left:.4rem;font-size:.75rem;transition:transform .25s ease}
.v6-page .pd-post:hover .pd-post-more i{transform:translateX(4px)}
.v6-page .pd-post-stats{display:flex;align-items:center;gap:.9rem;font-size:.76rem;color:var(--v6-doux)}
.v6-page .pd-post-stats i{margin-right:.3rem;color:var(--v6-bleu)}
.v6-page .pd-post-lead{margin-bottom:1.6rem}
.v6-page .pd-post{position:relative}
.v6-page .pd-post>time,
.v6-page .pd-post>span[itemprop="author"],
.v6-page .pd-post>div[itemprop="publisher"]{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none}
@media(min-width:768px){
	.v6-page .pd-post-lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto;align-items:stretch}
	.v6-page .pd-post-lead>.pd-post-media{grid-column:1;grid-row:1 / span 2;aspect-ratio:auto;height:100%}
	.v6-page .pd-post-lead>.pd-post-body{grid-column:2;grid-row:1;justify-content:center;padding:1.9rem 1.9rem 0}
	.v6-page .pd-post-lead>.pd-post-foot{grid-column:2;grid-row:2;margin-top:1.6rem;padding:.95rem 1.9rem 1.4rem;border-top:0}
	.v6-page .pd-post-lead .pd-post-title{font-size:1.5rem;line-height:1.25}
	.v6-page .pd-post-lead .pd-post-excerpt{font-size:.95rem;margin-top:.75rem}
}
.v6-page .pd-blog-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:576px){
	.v6-page .pd-blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1200px){
	.v6-page .pd-blog-grid{grid-template-columns:repeat(3,1fr)}
}
.v6-page .pd-read-layout{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:992px){
	.v6-page .pd-read-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:3.5rem;align-items:start}
}
.v6-page .pd-read{max-width:none;margin:0}
.v6-page .pd-read-title{margin:0 0 1rem;font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--v6-bleu)}
.v6-page .pd-read-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;margin:0 0 1.8rem;padding:0;list-style:none;font-size:.8rem;color:var(--v6-doux)}
.v6-page .pd-read-meta li{display:flex;align-items:center;gap:.4rem}
.v6-page .pd-read-meta i{color:var(--v6-bleu)}
.v6-page .pd-read-cover{margin:0 0 2.6rem;border-radius:.9rem;overflow:hidden;background:var(--v6-line)}
.v6-page .pd-read-cover img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:992px){
	.v6-page .pd-read-cover{aspect-ratio:21/9}
}
.v6-page .pd-article-body{font-size:1.09rem;line-height:1.8;color:var(--v6-texte)}
.v6-page .pd-article-body>*:first-child{margin-top:0}
.v6-page .pd-article-body p{margin:0 0 1.2rem}
.v6-page .pd-article-body .lead{font-size:1.16rem;line-height:1.62;font-weight:500;color:var(--v6-bleu)}
.v6-page .pd-article-body h2{margin:2.6rem 0 1rem;font-size:1.5rem;font-weight:800;line-height:1.25;letter-spacing:-.015em;color:var(--v6-bleu)}
.v6-page .pd-article-body h3{margin:2rem 0 .7rem;font-size:1.12rem;font-weight:700;line-height:1.35;color:var(--v6-bleu)}
.v6-page .pd-article-body h4{margin:1.6rem 0 .6rem;font-size:1rem;font-weight:700;color:var(--v6-bleu)}
.v6-page .pd-article-body ul{margin:0 0 1.2rem;padding-left:1.25rem}
.v6-page .pd-article-body li{margin-bottom:.55rem}
.v6-page .pd-article-body ul li::marker{color:var(--v6-bleu)}
.v6-page .pd-article-body ol{list-style:none;counter-reset:acr-etape;margin:0 0 1.35rem;padding-left:0}
.v6-page .pd-article-body ol>li{position:relative;counter-increment:acr-etape;margin-bottom:.85rem;padding-left:3rem;line-height:1.7}
.v6-page .pd-article-body ol>li::before{content:counter(acr-etape,decimal-leading-zero);position:absolute;left:0;top:.1rem;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.55rem;background:rgba(var(--v6-orange-rgb),.1);color:var(--v6-bleu);font-size:.76rem;font-weight:800;font-style:normal;letter-spacing:.02em;line-height:1}
.v6-page .pd-article-body ol ol,.v6-page .pd-article-body ol ul,.v6-page .pd-article-body ul ol{margin-top:.6rem}
.v6-page .pd-article-body ol ul{list-style:disc;padding-left:1.25rem}
.v6-page .pd-article-body ol ul li::before{content:none}
.v6-page .pd-article-body strong{font-weight:700;color:var(--v6-bleu)}
.v6-page main .pd-article-body a{color:var(--v6-bleu);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.v6-page .pd-article-body img{max-width:100%;height:auto;border-radius:.6rem}
.v6-page .pd-article-body blockquote{margin:2.2rem 0;padding:.15rem 0 .15rem 1.6rem;border-left:3px solid var(--v6-orange);font-size:1.14rem;line-height:1.65;font-style:italic;color:rgba(var(--v6-bleu-rgb),.86)}
.v6-page .pd-article-body blockquote strong{color:var(--v6-bleu)}
.v6-page .pd-article-body blockquote p:last-child{margin-bottom:0}
.v6-page .pd-article-cta{margin:2.8rem 0;text-align:center}
.v6-page .pd-article-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--v6-line)}
.v6-page .pd-kw-label{margin:0 0 .6rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v6-doux)}
.v6-page .pd-kw-list{display:flex;flex-wrap:wrap;gap:.4rem}
.v6-page .pd-kw{display:inline-block;padding:.3rem .7rem;border-radius:50px;background:var(--v6-line);font-size:.76rem;font-weight:600;color:var(--v6-texte);text-decoration:none;transition:background .2s ease,color .2s ease}
.v6-page .pd-kw:hover{background:rgba(var(--v6-orange-rgb),.12);color:var(--v6-bleu)}
.v6-page .pd-like{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.15rem;border:1px solid var(--v6-line);border-radius:50px;background:rgba(var(--v6-blanc-rgb),1);font-size:.83rem;font-weight:700;color:var(--v6-texte);cursor:pointer;transition:border-color .2s ease,background .2s ease}
.v6-page .pd-like i{color:var(--v6-bleu)}
.v6-page .pd-like:hover:not(:disabled){border-color:rgba(var(--v6-orange-rgb),.55);background:rgba(var(--v6-orange-rgb),.05)}
.v6-page .pd-like:disabled{opacity:.55;cursor:default}
.v6-page .pd-like-badge{min-width:1.4rem;padding:.1rem .45rem;border-radius:50px;background:var(--v6-line);font-size:.75rem;color:var(--v6-bleu)}
.v6-page .pd-share{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--v6-line)}
.v6-page .pd-share-title{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v6-doux)}
.v6-page .pd-share-links{display:flex;gap:.55rem}
.v6-page main .pd-share-links a{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:50%;background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);color:var(--v6-texte);text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}
.v6-page .pd-share-links a:hover{background:var(--v6-orange);border-color:var(--v6-orange);color:rgba(var(--v6-blanc-rgb),1);transform:translateY(-2px)}
.v6-page .pd-next{margin:3.5rem 0 0;padding-top:2.2rem;border-top:1px solid var(--v6-line)}
.v6-page .pd-next-title{margin:0 0 1.4rem;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v6-doux)}
.v6-page .pd-next-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:576px){
	.v6-page .pd-next-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:992px){
	.v6-page .pd-next-grid{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){
	.v6-page .pd-post,.v6-page .pd-post-media img,.v6-page .pd-post-more i,.v6-page .pd-side-cats a,.v6-page .pd-share-links a{transition:none}
	.v6-page .pd-post:hover{transform:none}
	.v6-page .pd-post:hover .pd-post-media img{transform:none}
}
.v6-page .pd-article-body blockquote{background:none}
.v6-page a.btn-slide,
.v6-page main .pd-article-body a.btn-slide{color:var(--btn-color,rgba(var(--v6-blanc-rgb),1));text-decoration:none}
.v6-page a.btn-slide:hover,
.v6-page .pd-article-body a.btn-slide:hover{color:var(--btn-color-hover,rgba(var(--v6-blanc-rgb),1))}
/* 🔴 `a.btn-acro-ink` A ETE RETIRE DE CETTE LISTE, ET C'EST VOLONTAIRE.
   light.css forcait ici du BLANC sur ces deux boutons parce qu'ils y etaient
   PLEINS (l'un bleu vif, l'autre bleu nuit). En v6 `btn-acro-ink` est un
   bouton CERCLE, transparent : la regle ci-dessous, a (0,2,1), battait
   `.v6-page .btn-acro-ink` a (0,2,0) et repeignait le libelle en blanc sur du
   creme - 1,07:1, le bouton fantome qu'on avait deja corrige une fois, revenu
   par le portage du blog. Mesure : « Voir nos realisations » et « Nous
   appeler » invisibles sur deux pages d'atterrissage.
   ⚠️ `pd-side-cta` reste, lui : il est bel et bien plein en v6. */
.v6-page a.pd-side-cta,
.v6-page main .pd-article-body a.pd-side-cta{color:rgba(var(--v6-blanc-rgb),1);text-decoration:none}
.v6-page a.pd-side-cta:hover{color:rgba(var(--v6-blanc-rgb),1)}

/* --- 22 bis. LES ARBITRAGES DU BLOG --------------------------------------
   🔴 Même fil rouge que pour les réalisations : l'ancienne charte écrivait
   avec son accent, la v6 ne peut pas. Chaque endroit où le bleu vif faisait
   office de lien devient bleu nuit SOULIGNÉ D'ORANGE.

   ⚠️ Les PICTOGRAMMES et les MARQUEURS de liste, eux, gardent l'accent : ce
   sont des graphismes, le seuil y est de 3:1 et l'orange le tient (3,01:1
   sur blanc). Un accent qui n'écrit pas est un accent qui reste. */

/* Les liens du surtitre (la rubrique), le titre d'un article, le lien
   « lire la suite » : soulignement orange au survol. ⛔ Sans cela le survol
   ne renvoyait plus RIEN - la conversion avait rendu l'état identique au
   repos. */
.v6-page main .pd-eyebrow a:hover,
.v6-page main .pd-post:hover .pd-post-title a,
.v6-page main .pd-post-title a:hover,
.v6-page main .pd-next-title a:hover{
	color:var(--v6-bleu);
	text-decoration:underline;text-decoration-color:var(--v6-orange);
	text-decoration-thickness:2px;text-underline-offset:3px;
}
/* Le lien « lire la suite » se lit comme un lien SANS survol : un lien qui
   n'apparaît qu'au passage de la souris est invisible au clavier et au
   tactile. Soulignement permanent, qui s'épaissit au survol. */
.v6-page main .pd-post-more{
	color:var(--v6-bleu);
	text-decoration:underline;text-decoration-color:var(--v6-orange);
	text-decoration-thickness:2px;text-underline-offset:3px;
}
/* Les liens DANS un article rédigé : idem, et c'est là que ça compte le plus -
   c'est le maillage interne du site. */
.v6-page main .pd-article-body a{
	color:var(--v6-bleu);text-decoration:underline;
	text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:3px;
}
/* ⚠️ Sauf les liens qui sont des BOUTONS : leur habillage vient du composant,
   pas du corps de l'article. Le soulignement les défigurerait. */
.v6-page main .pd-article-body a.btn-slide,
.v6-page main .pd-article-body a.btn-acro-ink,
.v6-page main .pd-article-body a.btn-acro-primary,
.v6-page main .pd-article-body a.pd-side-cta,
.v6-page main .pd-article-body a.v6-btn{text-decoration:none}

/* Pictogrammes et marqueurs : l'accent y reste, c'est du graphisme. */
.v6-page .pd-post-stats i,
.v6-page .pd-read-meta i,
.v6-page .pd-like i,
.v6-page .pd-article-body ul li::marker{color:var(--v6-orange)}
/* Le surtitre porte-drapeau (« À la une ») : pastille pêche, libellé bleu
   nuit - 12,9:1. ⛔ Pas de libellé orange, 2,81:1. */
.v6-page .pd-eyebrow-flag{
	color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	padding:.15rem .5rem;border-radius:50px;
}
/* Le numéro d'étape d'une liste ordonnée : surface orange, chiffre bleu nuit.
   Il était sur un voile à 10 % d'opacité, donc quasi invisible. */
.v6-page .pd-article-body ol>li::before{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}
/* Un mot-clé au survol : la pastille se remplit d'orange. */
.v6-page main .pd-kw:hover{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);text-decoration:none}

/* ==========================================================================
   23. LA PAGE /a-propos (.ap-*)
   ----------------------------------------------------------------------
   Portee le 2026-08-25 depuis le <style> en ligne de la page.

   ⚠️ CETTE PAGE ETAIT SOMBRE, et c'est ce qui la distingue de toutes les
   precedentes : elle n'etait pas une « ile claire » posee sur un site
   sombre, elle etait DU site sombre. Ses cartes translucides, ses halos
   bleus et ses lisere lumineux existaient pour detacher du contenu d'un
   fond quasi-noir. Sur du creme, ces memes effets ne detachent plus rien -
   ils salissent. Les arbitrages sont regroupes en 23 bis.
   ========================================================================== */
.v6-page .ap-hero{padding:7rem 0 4rem;position:relative;overflow:hidden}
.v6-page .ap-hero::before{content:'';position:absolute;top:-40%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(var(--v6-orange-rgb),.08) 0%,transparent 70%);pointer-events:none}
.v6-page .ap-hero::after{content:'';position:absolute;bottom:-30%;left:-15%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(var(--v6-orange-rgb),.06) 0%,transparent 70%);pointer-events:none}
.v6-page .ap-hero-kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1rem;border-radius:50px;background:rgba(var(--v6-orange-rgb),.08);border:1px solid rgba(var(--v6-orange-rgb),.15);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--v6-bleu);margin-bottom:1.25rem}
.v6-page .ap-hero-kicker .pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--v6-orange);animation:ap-pulse 2s ease-in-out infinite}
.v6-page .ap-hero h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;line-height:1.15;margin-bottom:1.25rem}
.v6-page .ap-hero h1 .text-blue{color:var(--v6-bleu)}
.v6-page .ap-hero h1 .text-red{color:var(--v6-bleu)}
.v6-page .ap-hero-lead{font-size:1.05rem;color:var(--v6-texte);line-height:1.8;max-width:640px;margin-bottom:2rem}
.v6-page .ap-hero-stats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.v6-page .ap-stat-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:50px;background:rgba(var(--v6-bleu-rgb),.6);border:1px solid rgba(var(--v6-blanc-rgb),.06);font-size:.78rem;font-weight:600;color:var(--v6-texte);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.v6-page .ap-stat-chip i{color:var(--v6-bleu);font-size:.7rem}
/* L'etoile garde son or, mais le jeton de la charte, pas un litteral. */
.v6-page .ap-stat-chip--gold i{color:var(--v6-etoile)}
.v6-page .ap-hero-img{position:relative;border-radius:1.25rem;overflow:hidden;box-shadow:0 25px 80px rgba(var(--v6-bleu-rgb),.4),0 0 0 1px rgba(var(--v6-bleu-rgb),.08)}
.v6-page .ap-hero-img img{width:100%;height:auto;display:block}
.v6-page .ap-hero-img::after{content:'';position:absolute;inset:0;border-radius:1.25rem;box-shadow:inset 0 0 40px rgba(var(--v6-bleu-rgb),.3);pointer-events:none}
.v6-page .ap-timeline{counter-reset:timeline-step}
.v6-page .ap-timeline-item{display:flex;gap:1.5rem;position:relative;padding-bottom:2rem}
.v6-page .ap-timeline-item:last-child{padding-bottom:0}
.v6-page .ap-timeline-marker{flex:0 0 3rem;display:flex;flex-direction:column;align-items:center}
.v6-page .ap-timeline-dot{width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(var(--v6-blanc-rgb),1);border:2px solid var(--v6-orange);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--v6-bleu);z-index:2;counter-increment:timeline-step}
.v6-page .ap-timeline-dot::before{content:counter(timeline-step)}
.v6-page .ap-timeline-line{flex:1;width:2px;background:linear-gradient(180deg,var(--v6-orange),rgba(var(--v6-orange-rgb),.1));margin-top:.25rem}
.v6-page .ap-timeline-item:last-child .ap-timeline-line{display:none}
.v6-page .ap-timeline-content{flex:1;padding-top:.35rem}
.v6-page .ap-timeline-content h3{font-size:1.05rem;font-weight:700;margin:0 0 .35rem}
.v6-page .ap-timeline-content p{font-size:.92rem;color:var(--v6-texte);margin:0;line-height:1.7}
.v6-page .ap-timeline-year{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--v6-bleu);margin-bottom:.15rem}
.v6-page .ap-pillar{position:relative}
.v6-page .ap-pillar .card-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.25rem;transition:all .3s}
.v6-page .ap-pillar:hover .card-icon{transform:scale(1.1)}
.v6-page .ap-team-card{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:1.25rem;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;height:100%}
.v6-page .ap-team-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--v6-orange),transparent);opacity:0;transition:opacity .4s}
.v6-page .ap-team-card:hover{background:rgba(var(--v6-blanc-rgb),1);border-color:var(--v6-orange);transform:translateY(-6px);box-shadow:0 20px 60px rgba(var(--v6-bleu-rgb),.1),0 0 0 1px rgba(var(--v6-bleu-rgb),.08)}
.v6-page .ap-team-card:hover::before{opacity:1}
.v6-page .ap-team-photo{position:relative;overflow:hidden;aspect-ratio:1/1}
.v6-page .ap-team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.v6-page .ap-team-card:hover .ap-team-photo img{transform:scale(1.04)}
.v6-page .ap-team-photo::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(0deg,rgba(var(--v6-bleu-rgb),.85) 0%,transparent 100%);pointer-events:none}
.v6-page .ap-team-body{padding:1.5rem 1.5rem 1.75rem;position:relative;z-index:2;margin-top:-2.5rem}
.v6-page .ap-team-name{font-size:1.15rem;font-weight:700;margin:0 0 .15rem}
.v6-page .ap-team-role{font-size:.82rem;font-weight:600;color:var(--v6-bleu);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.04em}
.v6-page .ap-team-bio{font-size:.9rem;color:var(--v6-texte);line-height:1.7;margin:0;text-align:justify}
.v6-page .ap-numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:768px){
	.v6-page .ap-numbers{grid-template-columns:repeat(4,1fr)}
}
.v6-page .ap-number-card{text-align:center;padding:1.5rem 1rem;background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:1rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s}
.v6-page .ap-number-card:hover{border-color:var(--v6-orange);transform:translateY(-4px);box-shadow:0 15px 40px rgba(var(--v6-bleu-rgb),.08)}
.v6-page .ap-number-val{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;background:linear-gradient(135deg,var(--v6-orange),var(--v6-orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:.25rem}
.v6-page .ap-number-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--v6-texte)}
.v6-page .ap-quote{position:relative;background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:1.25rem;padding:2.5rem 2rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}
.v6-page .ap-quote::before{content:'\201C';position:absolute;top:-.25rem;left:1.25rem;font-size:6rem;font-weight:900;line-height:1;color:var(--v6-bleu);pointer-events:none}
.v6-page .ap-quote blockquote{position:relative;z-index:2;font-size:1.05rem;font-style:italic;color:var(--v6-bleu);line-height:1.8;margin:0;padding:0}
.v6-page .ap-quote-author{margin-top:1rem;font-size:.82rem;font-weight:600;color:var(--v6-texte)}
.v6-page .ap-cta{position:relative;padding:4rem 2rem;border-radius:1.25rem;background:linear-gradient(135deg,rgba(var(--v6-bleu-rgb),.75),rgba(var(--v6-orange-rgb),.08));border:1px solid var(--v6-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-align:center;overflow:hidden}
.v6-page .ap-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--v6-orange),transparent)}
.v6-page .ap-cta h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;margin-bottom:.75rem}
.v6-page .ap-cta p{color:var(--v6-texte);font-size:1rem;max-width:500px;margin:0 auto 1.5rem;line-height:1.7}
@media(max-width:991.98px){
	.v6-page .ap-hero{padding:5rem 0 3rem}
	.v6-page .ap-hero-img{margin-top:2rem}
}
@media(max-width:575.98px){
	.v6-page .ap-hero-stats{gap:.5rem}
	.v6-page .ap-stat-chip{font-size:.72rem;padding:.3rem .7rem}
	.v6-page .ap-cta{padding:2.5rem 1.25rem}
}

/* --- 23 bis. LES ARBITRAGES DE /a-propos ---------------------------------
   Cette page était SOMBRE : ce n'était pas une « île claire », elle écrivait
   ses couleurs en clair dans un `<style>` posé sur le fond quasi-noir de
   l'ancienne charte. Passer au crème inverse tout le raisonnement, et ce que
   la conversion mécanique produit n'est presque jamais bon du premier coup
   sur ce type de page. D'où ce bloc, plus fourni que les autres. */

/* Le titre du hero. 🔴 `.text-blue` et `.text-red` étaient les DEUX accents de
   l'ancienne charte ; convertis, ils devenaient tous deux du bleu nuit, donc
   plus d'accent du tout. Le surlignage orange les remplace, comme sur les
   pages d'offre et sur l'accueil : lettres bleu nuit, 5,08:1. */
.v6-page .ap-hero h1 .text-blue,
.v6-page .ap-hero h1 .text-red{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	padding:0 .16em .04em;border-radius:.1em;
	-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* Le surtitre : la pastille pêche de la charte. Un voile d'orange à 8 % sur du
   crème ne se voit pas. ⛔ Sa pastille clignotante est arrêtée : une animation
   en boucle non sollicitée est exactement ce que `prefers-reduced-motion`
   demande de couper, et elle ne disait rien. */
.v6-page .ap-hero-kicker{background:rgba(var(--v6-peche-rgb),1);border-color:transparent;font-weight:800}
.v6-page .ap-hero-kicker .pulse{display:none}

/* Les pastilles de preuve du hero. ⚠️ La conversion leur avait laissé un fond
   BLEU NUIT à 60 % avec du texte encre par-dessus : illisible. Sur fond clair,
   une pastille est blanche. */
.v6-page .ap-stat-chip{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);
	color:var(--v6-texte);
	backdrop-filter:none;-webkit-backdrop-filter:none;
}
.v6-page .ap-stat-chip i{color:var(--v6-orange)}

/* La photo du hero : plus de halo bleu ni de liseré interne sombre - ils
   servaient à détacher l'image d'un fond noir. Sur du crème c'est une ombre
   portée douce qui fait le travail. */
.v6-page .ap-hero-img{box-shadow:var(--v6-ombre)}
.v6-page .ap-hero-img::after{content:none}

/* 🔴 Le grand guillemet décoratif. La conversion en avait fait du BLEU NUIT
   PLEIN à 6 rem : il passait devant la citation au lieu de rester derrière.
   L'original était à 8 % d'opacité - c'est cette valeur-là qui compte, pas la
   teinte. */
.v6-page .ap-quote::before{color:rgba(var(--v6-orange-rgb),.35)}
.v6-page .ap-quote blockquote{color:var(--v6-bleu)}

/* Le nombre-clé d'une carte de chiffres : il était peint par un dégradé sur
   texte transparent. ⚠️ Un dégradé d'orange vers orange n'est plus un dégradé,
   et l'orange ne peut pas écrire : on annule le remplissage transparent (sans
   quoi le chiffre disparaît) et on écrit en bleu nuit. */
.v6-page .ap-number-val{
	background:none;-webkit-text-fill-color:currentColor;
	color:var(--v6-bleu);
}

/* La coupe d'appel final : une vraie coupe BLEU NUIT, pas un voile translucide
   sur du crème. ⚠️ Le `backdrop-filter` n'a plus rien à flouter une fois le
   fond opaque : on le retire, il coûte une couche de composition pour rien. */
.v6-page .ap-cta{
	background:rgba(var(--v6-bleu-rgb),1);border-color:transparent;
	backdrop-filter:none;-webkit-backdrop-filter:none;
	box-shadow:var(--v6-ombre);
}
.v6-page .ap-cta h2{color:var(--v6-blanc)}
.v6-page .ap-cta p{color:var(--v6-bleu-clair)}
.v6-page .ap-cta::before{background:rgba(var(--v6-orange-rgb),1);height:3px}

/* Le voile en bas des portraits sert à poser le nom par-dessus la photo : il
   reste, c'est du fond d'image, pas de la surface d'interface. */

/* Les pastilles d'icône des piliers : le composant de la charte, pastille
   bleu nuit à picto orange. Elles n'avaient pas de couleur propre - elles la
   prenaient de `card-icon` dans theme.css, qui ne s'applique plus. */
.v6-page .ap-pillar .card-icon{
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-orange);
	flex:0 0 auto;align-self:flex-start;
}
.v6-page .ap-team-name{color:var(--v6-bleu)}
.v6-page .ap-team-role{color:var(--v6-doux)}

@media(prefers-reduced-motion:reduce){
	.v6-page .ap-team-card:hover,
	.v6-page .ap-number-card:hover,
	.v6-page .ap-pillar:hover .card-icon{transform:none}
	.v6-page .ap-team-card:hover .ap-team-photo img{transform:none}
}

/* ==========================================================================
   24. LES COMPOSANTS HÉRITÉS DE theme.css, REPEINTS
   ----------------------------------------------------------------------
   Ajouté le 2026-08-25. Ces classes ne appartiennent à aucune page : elles
   sont le vocabulaire commun de l'ANCIENNE charte sombre, et une bonne
   dizaine de pages s'en servent encore (/a-propos, /tarifs, /acro-ia,
   /parrainage, des blocs de fiche produit…).

   ⚠️ Elles ont toutes le même défaut, et c'est le même que partout ailleurs :
   elles ont été dessinées pour DÉTACHER du contenu d'un fond quasi-noir.
   D'où des surfaces translucides, des `backdrop-filter`, des liserés
   lumineux et des halos. Posés sur du crème, ces effets ne détachent plus
   rien - ils salissent, et ils coûtent une couche de composition.

   ⛔ On ne les renomme pas et on ne touche pas au markup des pages : elles
   sont citées dans des dizaines de gabarits, et certaines dans du contenu
   rédigé au back-office. On les repeint, comme tout le reste.

   🔴 `icon-blue` / `icon-red` / `icon-cyan` : trois variantes pour DEUX
   accents qui n'existent plus. Elles convergent vers la pastille de la
   charte - fond bleu nuit, pictogramme orange, 5,09:1. ⛔ Ne pas réintroduire
   une couleur par variante « pour garder la distinction » : cette
   distinction ne portait aucun sens, elle décorait.
   ========================================================================== */

.v6-page .glass-card{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);
	border-radius:var(--v6-r-carte);
	/* ⚠️ Un `backdrop-filter` derrière un fond OPAQUE ne floute rien : il ne
	   reste qu'une couche de composition payée pour rien, sur chaque carte. */
	backdrop-filter:none;-webkit-backdrop-filter:none;
	box-shadow:var(--v6-ombre-s);
}
.v6-page .glass-card::before{content:none}
.v6-page .glass-card h2,
.v6-page .glass-card h3,
.v6-page .glass-card h4,
.v6-page .glass-card h5{color:var(--v6-bleu)}
.v6-page .glass-card:hover{border-color:var(--v6-orange)}
/* ⚠️ theme.css peint le texte d'une carte de verre en `rgba(255,255,255,.8)` :
   du blanc a 80 %, concu pour un fond noir. Sur la carte blanche de la v6 il
   donne 1,00:1 - du texte litteralement invisible. Il faut le reecrire ici, la
   couleur de FOND ne suffit pas a l'annuler. */
.v6-page .glass-card p,
.v6-page .glass-card li,
.v6-page .glass-card span:not([class]){color:var(--v6-texte)}
/* ⚠️ Et le meme pour le portail Support, qui reutilise `.glass-card` SANS
   passer par `.v6-page main` : son chrome est autonome. */
.v6-page .glass-card p{color:var(--v6-texte)}

/* La carte mise en avant : un filet ORANGE plein, pas une lueur. */
.v6-page .card-featured{border-color:var(--v6-orange)!important;box-shadow:var(--v6-ombre)}
.v6-page .badge-featured,
.v6-page .card-featured .badge-featured{
	position:absolute;top:0;right:24px;
	background:rgba(var(--v6-orange-rgb),1);
	/* ⚠️ bleu nuit sur l'orange - 5,08:1. ⛔ Le blanc n'y vaut que 2,40:1, et
	   c'est exactement ce que la sonde a relevé sur cette étiquette. */
	color:var(--v6-bleu);
	font-size:.65rem;font-weight:800;
	padding:.3rem .8rem;border-radius:0 0 8px 8px;
	text-transform:uppercase;letter-spacing:.05em;
}

/* Les pastilles de pictogramme. ⚠️ `flex:0 0 auto` : sans lui la pastille se
   comprime dans une carte étroite et sort rectangulaire - défaut mesuré sur
   les 19 pastilles du mégamenu. */
.v6-page .icon-blue,
.v6-page .icon-red,
.v6-page .icon-cyan,
.v6-page .card-icon{
	background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-orange);
	flex:0 0 auto;align-self:flex-start;
}

/* Le bouton secondaire : cerclé de bleu nuit, écrit en bleu nuit. Il était
   cerclé de bleu vif ET écrit en bleu clair - sur du crème, 1,68:1. */
.v6-page .btn-acro-secondary{
	background:transparent;
	border:2px solid var(--v6-bleu);
	color:var(--v6-bleu);
	font-weight:800;font-size:.9rem;
	padding:.7rem 1.8rem;border-radius:50px;
	transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.v6-page .btn-acro-secondary:hover{
	background:rgba(var(--v6-bleu-rgb),1);
	border-color:rgba(var(--v6-bleu-rgb),1);
	color:var(--v6-blanc);
}
/* Dans une coupe nuit, le même bouton s'inverse. */
.v6-page .pd-dark .btn-acro-secondary,
.v6-page .of-portfolio .btn-acro-secondary,
.v6-page .ap-cta .btn-acro-secondary,
.v6-page .acroia-section .btn-acro-secondary{border-color:rgba(var(--v6-blanc-rgb),.5);color:var(--v6-blanc)}
.v6-page .pd-dark .btn-acro-secondary:hover,
.v6-page .of-portfolio .btn-acro-secondary:hover,
.v6-page .ap-cta .btn-acro-secondary:hover,
.v6-page .acroia-section .btn-acro-secondary:hover{background:rgba(var(--v6-blanc-rgb),1);border-color:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}

/* Chapeau de section, surtitre, bande alternée. ⚠️ `.section-lead` était en
   `rgba(255,255,255,.8)` : sur du crème, 1,07:1 - du texte blanc sur blanc.
   C'est le défaut le plus fréquent d'une page anciennement sombre. */
.v6-page .section-lead{color:var(--v6-texte);font-size:1rem;max-width:600px;line-height:1.8}
.v6-page .section-lead.mx-auto{margin-inline:auto}
.v6-page .section-tag{
	display:inline-flex;align-items:center;gap:.4rem;
	padding:.3rem .85rem;border-radius:50px;
	background:rgba(var(--v6-peche-rgb),1);border:1px solid transparent;
	font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
	color:var(--v6-bleu);margin-bottom:1rem;
}
.v6-page .section-tag i{color:var(--v6-orange)}
/* La bande alternée : elle rythme la page en passant du crème au blanc. Elle
   ne peut plus être un dégradé vers le noir. */
.v6-page .section-alt{background:rgba(var(--v6-blanc-rgb),1)}
/* 🔴 `article.card` ET `.blog-share-box`, `.boutique-info-card`,
   `.out-of-stock-card` : les cartes GENERIQUES de theme.css. Elles sont
   translucides sur du quasi-noir - `rgba(25,35,64,.55)`. Posees sur le creme
   elles rendent un GRIS SALE, et le texte clair qu'elles portent devient
   illisible. Mesure sur /demande-de-devis : les deux panneaux du
   questionnaire sortaient gris.
   ⚠️ `article.card` porte la BALISE dans son selecteur, (0,1,1) : une regle
   en `.v6-page .card` a (0,2,0) la bat, mais on garde la meme forme pour que
   le rapprochement soit evident a la lecture. */
.v6-page article.card,
.v6-page .blog-share-box,
.v6-page .boutique-info-card,
.v6-page .out-of-stock-card{
	background:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);
	color:var(--v6-texte);
}
.v6-page article.card:hover{box-shadow:var(--v6-ombre);transform:translateY(-2px)}
/* Le filet rouge de l'ancienne charte : il n'y a plus qu'un accent. */
.v6-page .sep-red{background:rgba(var(--v6-orange-rgb),1)}

.v6-page .acr-band{
	background:rgba(var(--v6-blanc-rgb),1);
	border-top:1px solid var(--v6-line);border-bottom:1px solid var(--v6-line);
}

/* 🔴 `.section-dark` N'INVERSE RIEN EN v6, ET C'EST DELIBERE.
   Son nom ment depuis la refonte : dans l'ancienne charte le site ENTIER etait
   sombre, et cette classe ne servait qu'a poser un rythme vertical (6 rem de
   respiration). Elle est employee sur une dizaine de sections qui n'ont jamais
   voulu etre une coupe sombre, juste une section.
   Une premiere version l'a prise au mot et y a peint les titres en blanc : sur
   le creme, 1,07:1 - onze blocs de texte blanc sur blanc sur /a-propos, releves
   par la sonde. Elle ne porte donc QUE de l'espacement (voir section 18
   quater), et une vraie coupe nuit se demande avec `.pd-dark`, `.of-portfolio`
   ou `.acroia-section`, qui posent un fond, eux.
   ⛔ Ne pas lui redonner de couleur de texte sans lui donner d'abord un fond. */

/* Les composants d'une coupe nuit, quand il y en a une VRAIE. */
.v6-page .pd-dark .section-tag,
.v6-page .of-portfolio .section-tag,
.v6-page .acroia-section .section-tag{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}
.v6-page .pd-dark .glass-card,
.v6-page .of-portfolio .glass-card,
.v6-page .acroia-section .glass-card{background:rgba(var(--v6-blanc-rgb),.06);border-color:rgba(var(--v6-blanc-rgb),.16)}
.v6-page .pd-dark .glass-card h2,.v6-page .pd-dark .glass-card h3,
.v6-page .pd-dark .glass-card h4,.v6-page .pd-dark .glass-card h5,
.v6-page .of-portfolio .glass-card h2,.v6-page .of-portfolio .glass-card h3,
.v6-page .of-portfolio .glass-card h4,.v6-page .of-portfolio .glass-card h5{color:var(--v6-blanc)}
.v6-page .pd-dark .icon-blue,.v6-page .pd-dark .icon-red,
.v6-page .pd-dark .icon-cyan,.v6-page .pd-dark .card-icon,
.v6-page .acroia-section .card-icon{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}

/* --- LE DEBORDEMENT DES GRANDES GOUTTIERES DE BOOTSTRAP -------------------
   🔴 UN `\.row.g-5` DANS UN `\.container` DEBORDE DE 12 px DE CHAQUE COTE.
   Ce n'est pas un bug du site, c'est le fonctionnement de Bootstrap : une
   rangee compense sa gouttiere par des marges negatives de la moitie de
   `--bs-gutter-x`, soit -24 px pour `g-5` ; le conteneur, lui, garde ses
   12 px de rembourrage, calcules sur SA propre gouttiere de 1,5 rem que la
   rangee ne remonte pas. 24 > 12, donc ca sort.
   On ne le voyait pas parce que `body` coupe le debordement horizontal -
   mais la page RESTE plus large que la fenetre, et c'est ce que mesure la
   recette. Mesure sur /a-propos en 428 px : 12 px.
   ⚠️ On annule la marge negative SANS toucher a la gouttiere : l'ecart
   entre les colonnes est conserve, seules leurs aretes exterieures rentrent
   de 12 px. ⛔ Ne pas « corriger » en baissant la gouttiere : ce serait
   changer la maquette pour reparer un debordement. */
.v6-page .container>.row.g-5,
.v6-page .container>.row.gx-5,
.v6-page .container-fluid>.row.g-5{margin-left:0;margin-right:0}

/* ==========================================================================
   25. LA PAGE /tarifs (.tp-*, .pricing-card, .billing-*)
   ----------------------------------------------------------------------
   Portee le 2026-08-25. ⚠️ C'est une page qui VEND : une couleur mal posee
   y coute de l'argent. Les arbitrages sont en 25 bis.
   ========================================================================== */
.v6-page .qw-billing-switch{margin-top:2rem;display:flex;justify-content:center;gap:.5rem}
.v6-page .qw-billing-btn{border-radius:999px;border:1px solid;padding:.4rem 1.1rem;font-size:.9rem;cursor:pointer;transition:all .16s ease;font-weight:500;font-family:inherit}
.v6-page .qw-billing-btn{border-color:rgba(var(--v6-bleu-rgb),.22);color:var(--v6-doux);background:rgba(var(--v6-blanc-rgb),1)}
.v6-page .qw-billing-btn:hover{border-color:rgba(var(--v6-orange-rgb),.5);color:var(--v6-bleu)}
.v6-page .qw-billing-btn.qw-billing-active{background:var(--v6-orange);border-color:var(--v6-orange);color:rgba(var(--v6-blanc-rgb),1);box-shadow:0 .5rem 1.2rem rgba(220,9,48,.22)}
.v6-page .tp-hero{--pd-wave-color:var(--pd-bg);background:linear-gradient(135deg,#0b2540 0%,#192340 50%,#2e203f 100%);position:relative;overflow:hidden}
.v6-page .tp-hero::before{content:'';position:absolute;top:0;right:0;width:420px;height:420px;background:radial-gradient(circle,rgba(var(--v6-orange-rgb),.14) 0%,transparent 70%);border-radius:50%;transform:translate(28%,-28%);pointer-events:none;inset:auto 0 auto auto}
.v6-page .tp-hero::after{display:none}
.v6-page .tp-hero > .container{position:relative;z-index:2}
.v6-page .tp-hero h1{color:rgba(var(--v6-blanc-rgb),1)}
.v6-page .tp-hero h1 .text-red{color:#ff5c7c}
.v6-page .tp-hero .of-hero-lead{color:rgba(var(--v6-blanc-rgb),.86)}
.v6-page .tp-hero .of-eyebrow{color:#7fb2ea}
.v6-page .tp-hero .tp-trust li{color:rgba(var(--v6-blanc-rgb),.92)}
.v6-page .tp-hero .tp-trust i{color:#4ade80}
.v6-page .tp-hero-right{position:relative}
.v6-page .tp-hero-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(var(--v6-blanc-rgb),1) 0%,#f5f8fc 55%,#eef3fa 100%);border:1px solid rgba(var(--v6-blanc-rgb),.9);border-radius:22px;padding:1.9rem 1.6rem 1.5rem;box-shadow:0 24px 60px rgba(var(--v6-bleu-rgb),.38),0 4px 12px rgba(25,74,122,.12),inset 0 0 0 1px rgba(255,255,255,.5);transform:rotate(-1.2deg);animation:tp-card-breath 9s ease-in-out infinite;transition:transform .5s ease}
.v6-page .tp-hero-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--v6-orange) 0%,#5f4a8a 50%,var(--v6-orange) 100%)}
.v6-page .tp-hero-card::after{content:'';position:absolute;top:-60px;right:-60px;width:190px;height:190px;background:radial-gradient(circle,rgba(var(--v6-orange-rgb),.12) 0%,var(--v6-orange) 70%);pointer-events:none}
.v6-page .tp-hero-right:hover .tp-hero-card{animation:none;transform:rotate(-.3deg) translateY(-3px)}
.v6-page .tp-hero-card-kicker{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--v6-bleu);margin:0 0 .2rem}
.v6-page .tp-hero-card h2{color:var(--v6-bleu);margin:0 0 1.1rem;font-weight:700}
.v6-page .tp-hero-args{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.45rem;position:relative;z-index:1}
.v6-page .tp-hero-args li{display:flex;align-items:flex-start;gap:.7rem;font-size:.86rem;line-height:1.45;color:rgba(var(--v6-bleu-rgb),.92);padding:.42rem .55rem;border-radius:10px;transition:background .2s ease,transform .2s ease}
.v6-page .tp-hero-args li:hover{background:rgba(var(--v6-orange-rgb),.06);transform:translateX(2px)}
.v6-page .tp-hero-args li i{flex-shrink:0;margin-top:.1rem;font-size:.8rem;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--v6-orange-rgb),.12);color:var(--v6-bleu)}

/* --- 25 ter. LE COMPARATIF DE LA GAMME ------------------------------------
   ⚠️ CE TABLEAU N'ETAIT PAS DANS light.css : il vit dans theme.css, en SOMBRE,
   et il n'a jamais eu de version claire - la page /tarifs le posait tel quel.
   Tout y est écrit en `rgba(255,255,255,.8)` : sur le crème, 1,07:1. La grille
   entière était invisible, ligne par ligne, sur la page qui compare les
   offres. Relevé par la sonde, pas à l'œil : le tableau est loin dans la page.

   ⚠️ L'en-tête reste une BANDE BLEU NUIT collante : c'est ce qui permet de
   savoir dans quelle colonne on lit après vingt lignes de défilement. C'est
   la seule partie qui devait rester sombre, et elle le reste. */
.v6-page .comparison-header{background:rgba(var(--v6-bleu-rgb),1);border-bottom-color:rgba(var(--v6-blanc-rgb),.14)}
.v6-page .comparison-hcell{color:var(--v6-blanc)}
/* La colonne mise en avant : un liseré orange et un voile clair. */
.v6-page .hcell-popular{background:rgba(var(--v6-blanc-rgb),.10);border-top-color:var(--v6-orange)}

.v6-page .comparison-table tbody td{color:var(--v6-texte);border-bottom-color:var(--v6-line)}
.v6-page .comparison-table tbody td:first-child{color:var(--v6-bleu);font-weight:600}
.v6-page .comparison-table tbody tr:hover td{background:rgba(var(--v6-peche-rgb),.4)}
/* Les lignes de rubrique : une bande pêche, pas un aplat sombre. */
.v6-page .comparison-table .section-row td{
	color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	border-bottom-color:var(--v6-line);
}
.v6-page .comparison-table .section-row i{color:var(--v6-orange)}
/* ⚠️ OUI ET NON : c'est la seule information du tableau, et elle doit se lire
   sans couleur. Le glyphe porte déjà le sens (✓ / ·) ; la couleur ne fait que
   l'accélérer. Le vert est celui du signal d'état, pas un accent de charte -
   même raison que les coches de la gamme. Le « non » reste GRIS et non
   transparent : à 20 % d'opacité il était invisible, donc indistinguable
   d'une case vide. */
.v6-page .comparison-table .ct-yes{color:var(--v6-succes)}
.v6-page .comparison-table .ct-no{color:var(--v6-doux)}
/* Les pastilles de sélection d'offre, en vue mobile : elles sont posées sur
   l'en-tête bleu nuit, elles restent claires. */
.v6-page .plan-badge{border-color:rgba(var(--v6-blanc-rgb),.28);color:var(--v6-blanc)}
.v6-page .plan-badge:hover{background:rgba(var(--v6-blanc-rgb),.12);color:var(--v6-blanc);border-color:rgba(var(--v6-blanc-rgb),.5)}
.v6-page .plan-badge.is-active{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);border-color:transparent}

/* Le bouton « Afficher plus » : c'est du TEXTE cliquable. ⛔ L'accent n'y tient
   pas (4,23:1 mesuré en rouge de marque, 2,81:1 en orange) : bleu nuit souligné
   d'orange, comme tous les liens de la charte. */
.v6-page .expand-toggle{
	color:var(--v6-bleu);font-weight:800;
	text-decoration:underline;text-decoration-color:var(--v6-orange);
	text-decoration-thickness:2px;text-underline-offset:3px;
}
.v6-page .expand-toggle:hover{text-decoration-thickness:3px}

/* ⚠️ LA VUE MOBILE DU COMPARATIF A SES PROPRES COULEURS, dans un `@media`
   de theme.css : le tableau y devient une liste, et les regles qui la peignent
   sont DISTINCTES de celles du tableau. Corriger la version bureau ne corrige
   donc rien en mobile - la sonde a continue a relever du blanc sur creme a
   428 px alors que 1440 px etait propre.
   ⛔ Regle a retenir : quand une famille a une vue mobile refaite, il faut
   repeindre LES DEUX. */
@media(max-width:1024px){
	.v6-page .comparison-table tbody tr{border-bottom-color:var(--v6-line)}
	.v6-page .comparison-table tbody td:first-child{color:var(--v6-bleu)}
	.v6-page .comparison-table.show-plan-1 tbody td:nth-child(2),
	.v6-page .comparison-table.show-plan-2 tbody td:nth-child(3),
	.v6-page .comparison-table.show-plan-3 tbody td:nth-child(4),
	.v6-page .comparison-table.show-plan-4 tbody td:nth-child(5){color:var(--v6-texte)}
	.v6-page .comparison-table .section-row{border-bottom-color:var(--v6-line)}
	.v6-page .comparison-table .section-row td[colspan]{color:var(--v6-bleu);background:transparent}
}

/* ==========================================================================
   26. LE QUESTIONNAIRE DE DEVIS (.qw-*)
   ----------------------------------------------------------------------
   Porte le 2026-08-25. ⚠️ Formulaire long et branchant : 4 parcours. Ce qui
   compte est qu'on sache a chaque instant quoi cliquer, ce qu'on a deja
   choisi et ce qui a echoue. Arbitrages en 26 bis.
   ========================================================================== */
.v6-page .pd-cat-side .sidebar-area .widget{background:transparent;border:0;padding:0;margin:0}
.v6-page .pd-cat-side .sidebar-area .widget h4{color:var(--v6-bleu)!important;font-size:1.15rem;font-weight:800;margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:1px solid var(--v6-line)}
.v6-page .bq-mobile-panel-body .sidebar-area{margin:0}
.v6-page .quote-wizard-card{border-radius:1rem}
.v6-page .quote-wizard-card .card-body{padding:1.5rem 1.75rem}
.v6-page .demande-devis-web .card{position:relative;border-radius:1rem}
.v6-page .qw-step-title{text-align:center;margin-bottom:2rem}
.v6-page .qw-step-title h2{margin:0 0 .5rem;font-size:1.8rem}
.v6-page .qw-step-title p{margin:0;font-size:.9rem;text-transform:uppercase;letter-spacing:.16em}
.v6-page .qw-step-title .qw-step-subline{width:60px;height:3px;background:var(--v6-orange);margin:1.1rem auto 0;border-radius:999px}
.v6-page .qw-step{display:none}
.v6-page .qw-step.qw-step-current{display:block}
.v6-page .qw-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
.v6-page .qw-card{position:relative;border-radius:.9rem;padding:1.25rem 1.5rem 1.25rem 2.5rem;min-width:210px;max-width:360px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.v6-page .qw-card:hover{transform:translateY(-2px)}
.v6-page .qw-card-title{font-weight:600;margin-bottom:.25rem;font-size:1.05rem}
.v6-page .qw-card-sub{font-size:.85rem;margin-bottom:.75rem}
.v6-page .qw-small-text{font-size:.85rem;margin:0}
.v6-page .qw-card-badge{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:all .16s ease}
.v6-page .qw-card.qw-card-selected .qw-card-badge::after{content:'\2713';color:rgba(var(--v6-blanc-rgb),1);font-size:.72rem;line-height:1}
.v6-page .qw-step-vert::after{content:'ÉTAPE'}
.v6-page .qw-chip{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:30px;padding:0 .7rem;border-radius:999px;font-size:.85rem;font-weight:600}
.v6-page .qw-billing-switch{margin-top:2rem;display:flex;justify-content:center;gap:.5rem}
.v6-page .qw-billing-btn{border-radius:999px;border:1px solid;padding:.4rem 1.1rem;font-size:.9rem;cursor:pointer;transition:all .16s ease;font-weight:500;font-family:inherit}
.v6-page .qw-pages-group{display:none}
.v6-page .qw-pages-group.qw-pages-group-active{display:flex}
.v6-page .qw-pages-card .qw-card-title{font-size:2rem;margin-bottom:.1rem}
.v6-page .qw-pages-card .qw-card-sub{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}
.v6-page .qw-domain-card .qw-card-title{margin-bottom:.2rem}
.v6-page .qw-domain-card small{font-size:.8rem}
.v6-page .qw-domain-card.qw-card-disabled{opacity:.35;cursor:not-allowed}
.v6-page .qw-maint-card .qw-card-title{margin-bottom:.25rem}
.v6-page .qw-maint-card p{font-size:.85rem;margin:0}
.v6-page .qw-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:1.25rem 1.75rem;max-width:640px;margin:0 auto 2rem}
.v6-page .qw-form-field{display:flex;flex-direction:column;font-size:.9rem}
.v6-page .qw-form-field label{margin-bottom:.35rem;font-weight:500}
.v6-page .qw-form-field input[type="text"],
.v6-page .qw-form-field input[type="email"],
.v6-page .qw-form-field input[type="tel"]{border-radius:999px;padding:.6rem 1rem;font-size:.95rem;font-family:inherit}
.v6-page .qw-form-field select{border-radius:999px;padding:.6rem 2.4rem .6rem 1rem;font-size:.95rem;font-family:inherit;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
.v6-page .qw-form-field select:focus-visible,
.v6-page .qw-form-field textarea:focus-visible,
.v6-page .qw-form-field input:focus-visible{outline:2px solid rgba(var(--v6-orange-rgb),.9);outline-offset:2px}
.v6-page .qw-besoin-card{cursor:pointer}
.v6-page .qw-besoin-card:focus-within{outline:2px solid rgba(var(--v6-orange-rgb),.9);outline-offset:3px}
.v6-page .qw-form-check{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;max-width:640px;margin:0 auto 1.5rem}
.v6-page .qw-form-check input[type="checkbox"]{margin-top:.1rem}
.v6-page .qw-summary{max-width:640px;margin:0 auto 2rem;padding:1rem 1.25rem;border-radius:.9rem;font-size:.9rem}
.v6-page .qw-summary-title{font-weight:600;margin-bottom:.5rem}
.v6-page .qw-summary dl{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:.35rem;margin:0;font-size:.88rem}
.v6-page .qw-summary dt{font-weight:400}
.v6-page .qw-summary dd{margin:0;text-align:right}
.v6-page .qw-nav{display:flex;justify-content:center;gap:1rem;margin-top:1rem}
.v6-page .qw-btn{border-radius:999px;border:none;padding:.7rem 1.6rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}
.v6-page .qw-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.v6-page .qw-btn-primary:hover:not(:disabled){transform:translateY(-2px)}
.v6-page .qw-btn-secondary:hover:not(:disabled){transform:translateY(-1px)}
.v6-page .qw-tooltip{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-12px);background:rgba(var(--v6-bleu-rgb),1);color:rgba(var(--v6-blanc-rgb),1);padding:1rem 1.25rem;border-radius:.9rem;width:420px;max-width:90vw;box-shadow:0 1.4rem 3rem rgba(var(--v6-bleu-rgb),.45);font-size:.72rem;line-height:1.45;z-index:20;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;border:1px solid rgba(var(--v6-blanc-rgb),.12)}
.v6-page .qw-tooltip::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border-width:10px 10px 0 10px;border-style:solid;border-color:rgba(var(--v6-bleu-rgb),1) transparent transparent transparent}
.v6-page .qw-tooltip ul{padding-left:1.1rem;margin:0;column-count:2;column-gap:1.5rem}
.v6-page .qw-tooltip li{margin-bottom:.25rem;break-inside:avoid}
.v6-page .qw-card.qw-tooltip-open .qw-tooltip{opacity:1;pointer-events:auto;transform:translate(-50%,-6px)}
.v6-page .qw-tooltip-toggle{position:absolute;left:.8rem;top:.8rem;width:20px;height:20px;border-radius:999px;border:none;font-size:.75rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.v6-page .qw-error{text-align:center;font-size:.85rem;margin-top:.75rem;min-height:1.2rem}
.v6-page .qw-sidebar-widget{margin-bottom:1.5rem}
.v6-page .qw-step-wrapper{position:relative;width:180px;height:140px;margin:0 auto 1.5rem;display:flex;justify-content:center}
.v6-page .qw-step-circle{width:140px;height:140px;border-radius:50%;position:absolute;top:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.6rem;color:var(--v6-bleu);--qw-progress:.2;z-index:0}
.v6-page .qw-step-circle::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--v6-orange) calc(var(--qw-progress) * 360deg),var(--v6-line) 0);z-index:-2}
.v6-page .qw-step-circle::after{content:'';position:absolute;inset:10px;border-radius:50%;background:rgba(var(--v6-blanc-rgb),1);z-index:-1}
.v6-page .qw-step-vert{position:absolute;top:84%;left:5%;transform:translateY(-50%) rotate(-90deg);transform-origin:bottom left;font-weight:700;text-transform:uppercase;letter-spacing:.25em;font-size:2rem;color:transparent;-webkit-text-stroke:.12rem rgba(var(--v6-bleu-rgb),.16);white-space:nowrap}
.v6-page .qw-steps-list{list-style:none;padding:0;margin:0;font-size:.9rem}
.v6-page .qw-steps-list li{display:flex;align-items:center;padding:.5rem 0;font-size:.9rem;opacity:.6;transition:opacity .16s ease,transform .16s ease}
.v6-page .qw-steps-list li::before{content:'';display:inline-block;width:22px;height:22px;border-radius:8px;margin-right:.6rem;border:2px solid;box-sizing:border-box}
.v6-page .qw-steps-list li.qw-step-active{opacity:1;font-weight:600;transform:translateX(3px)}
.v6-page .qw-steps-list li.qw-step-active::before{border-color:var(--v6-orange);background:radial-gradient(circle at 50% 50%,var(--v6-orange) 0,var(--v6-orange) 45%,transparent 46%)}
.v6-page .qw-steps-list li.qw-step-done{opacity:1}
.v6-page .qw-steps-list li.qw-step-done::before{border-color:#22c55e;background-color:#22c55e;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3 8 7 12 13 4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px 12px}
@media(max-width:900px){
	.v6-page .quote-wizard-card .card-body{padding:1.25rem}
	.v6-page .qw-form-grid{grid-template-columns:1fr}
	.v6-page .qw-tooltip ul{column-count:1}
}
@media(max-width:600px){
	.v6-page .qw-step-wrapper{margin-bottom:1rem}
	.v6-page .qw-summary dl{font-size:.7rem}
}
.v6-page .demande-devis-web .section-tag{background:rgba(var(--v6-orange-rgb),.10);color:var(--v6-bleu);border-color:rgba(var(--v6-orange-rgb),.28)}
.v6-page .demande-devis-web .section-tag i{color:var(--v6-bleu)}
.v6-page .qw-sidebar-widget h4,.v6-page .qw-sidebar-widget .h5{color:var(--v6-bleu)}
.v6-page .qw-step-title h2{color:var(--v6-bleu)}
.v6-page .qw-step-title p{color:var(--v6-bleu);opacity:1}
.v6-page .qw-card{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);box-shadow:0 6px 18px rgba(var(--v6-bleu-rgb),.07)}
.v6-page .qw-card:hover{box-shadow:0 14px 34px rgba(var(--v6-bleu-rgb),.14);border-color:rgba(var(--v6-orange-rgb),.4)}
.v6-page .qw-card.qw-card-selected{border-color:var(--v6-orange);box-shadow:0 10px 30px rgba(220,9,48,.16)}
.v6-page .qw-card-title{color:var(--v6-bleu)}
.v6-page .qw-card-sub,.v6-page .qw-small-text{color:var(--v6-doux)}
.v6-page .qw-card-badge{border-color:rgba(var(--v6-bleu-rgb),.25);background:var(--v6-line)}
.v6-page .qw-card.qw-card-selected .qw-card-badge{border-color:var(--v6-orange);background:var(--v6-orange);color:rgba(var(--v6-blanc-rgb),1)}
.v6-page .qw-chip{background:rgba(var(--v6-orange-rgb),.12);color:var(--v6-bleu)}
.v6-page .qw-domain-card small,.v6-page .qw-maint-card p{color:var(--v6-doux)}
.v6-page .qw-billing-btn{border-color:rgba(var(--v6-bleu-rgb),.22);color:var(--v6-doux);background:rgba(var(--v6-blanc-rgb),1)}
.v6-page .qw-billing-btn:hover{border-color:rgba(var(--v6-orange-rgb),.5);color:var(--v6-bleu)}
.v6-page .qw-billing-btn.qw-billing-active{background:var(--v6-orange);border-color:var(--v6-orange);color:rgba(var(--v6-blanc-rgb),1);box-shadow:0 .5rem 1.2rem rgba(220,9,48,.22)}
.v6-page .qw-form-field label{color:var(--v6-bleu)}
.v6-page .qw-form-field input[type="text"],
.v6-page .qw-form-field input[type="email"],
.v6-page .qw-form-field input[type="tel"],
.v6-page .qw-form-field textarea,
.v6-page .qw-form-field select{background:rgba(var(--v6-blanc-rgb),1);border:1px solid rgba(var(--v6-bleu-rgb),.22);color:var(--v6-bleu)}
.v6-page .qw-form-field textarea{border-radius:.75rem;padding:.7rem 1rem;font-family:inherit;font-size:.95rem;resize:vertical;min-height:110px}
.v6-page .qw-form-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23192340' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px}
.v6-page .qw-form-field input::placeholder,.v6-page .qw-form-field textarea::placeholder{color:rgba(var(--v6-bleu-rgb),.5)}
.v6-page .qw-form-field input:focus,.v6-page .qw-form-field textarea:focus,.v6-page .qw-form-field select:focus{outline:none;border-color:var(--v6-orange);box-shadow:0 0 0 .18rem rgba(var(--v6-bleu-rgb),.18)}
.v6-page .qw-form-check{color:var(--v6-texte)}
.v6-page .qw-form-check a{color:var(--v6-bleu);text-decoration:underline}
.v6-page .qw-summary{background:var(--v6-line);border:1px solid var(--v6-line)}
.v6-page .qw-summary-title{color:var(--v6-bleu)}
.v6-page .qw-summary dt{color:rgba(var(--v6-bleu-rgb),.78)}
.v6-page .qw-summary dd{color:var(--v6-bleu);font-weight:600}
.v6-page .qw-btn-secondary{background:transparent;border:1px solid rgba(var(--v6-orange-rgb),.5);color:var(--v6-bleu)}
.v6-page .qw-btn-secondary:hover:not(:disabled){background:rgba(var(--v6-orange-rgb),.08);border-color:var(--v6-orange);color:var(--v6-bleu);box-shadow:0 4px 18px rgba(25,74,122,.16)}
.v6-page .qw-btn-primary{background:var(--v6-orange);color:rgba(var(--v6-blanc-rgb),1);box-shadow:0 4px 20px rgba(220,9,48,.26)}
.v6-page .qw-btn-primary:hover:not(:disabled){background:#c00828;box-shadow:0 8px 30px rgba(220,9,48,.34)}
.v6-page .qw-error{color:var(--v6-bleu)}
.v6-page .qw-tooltip-toggle{background:rgba(var(--v6-orange-rgb),.14);color:var(--v6-bleu)}
.v6-page .qw-tooltip-toggle:hover{background:rgba(var(--v6-orange-rgb),.24)}
.v6-page .qw-steps-list li{color:var(--v6-doux)}
.v6-page .qw-steps-list li.qw-step-active{color:var(--v6-bleu)}
.v6-page .qw-steps-list li.qw-step-done{color:rgba(var(--v6-bleu-rgb),.92)}
.v6-page .qw-steps-list li::before{border-color:rgba(var(--v6-bleu-rgb),.28)}
.v6-page .pd-dark .qw-step-circle{color:rgba(var(--v6-blanc-rgb),1)}
.v6-page .pd-dark .qw-step-circle::after{background:rgba(var(--v6-bleu-rgb),1)}
.v6-page .pd-dark .qw-steps-list li{color:rgba(var(--v6-blanc-rgb),.9)}
.v6-page .pd-dark .qw-steps-list li.qw-step-active{color:rgba(var(--v6-blanc-rgb),1)}
.v6-page .pd-dark .qw-steps-list li::before{border-color:rgba(var(--v6-blanc-rgb),.22)}

/* --- 26 bis. LES ARBITRAGES DU QUESTIONNAIRE DE DEVIS ---------------------
   ⚠️ C'EST UN FORMULAIRE, et un formulaire long : quatre parcours, une
   dizaine d'étapes. Ce qui compte ici n'est pas l'élégance, c'est qu'à
   chaque instant on sache quoi cliquer, ce qu'on a déjà choisi, et ce qui a
   échoué. Toutes les décisions ci-dessous découlent de ça. */

/* Le bouton qui fait avancer. ⛔ Blanc sur l'orange = 2,40:1 : sur LE bouton
   qui porte tout le parcours, c'est le pire endroit du site pour ça. */
.v6-page .qw-btn-primary{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);font-weight:800;
	box-shadow:var(--v6-ombre-s);
}
.v6-page .qw-btn-primary:hover:not(:disabled){background:rgba(var(--v6-orange-bas-rgb),1);color:var(--v6-bleu);box-shadow:var(--v6-ombre)}
/* Le bouton « revenir » : cerclé de bleu nuit. Cerclé d'orange pâle, il se
   lisait comme désactivé. */
.v6-page .qw-btn-secondary{background:transparent;border:2px solid var(--v6-bleu);color:var(--v6-bleu);font-weight:800}
.v6-page .qw-btn-secondary:hover:not(:disabled){background:rgba(var(--v6-bleu-rgb),1);border-color:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc);box-shadow:var(--v6-ombre-s)}

/* 🔴 UNE CARTE SÉLECTIONNÉE DOIT SE VOIR SANS LA COULEUR. Elle porte donc
   TROIS signaux : la bordure orange, la pastille pleine, et la coche. ⛔ Ne
   jamais réduire ça à la seule bordure - c'est le retour visuel du seul geste
   que le visiteur fait sur cette page. */
.v6-page .qw-card.qw-card-selected{border-color:var(--v6-orange);box-shadow:var(--v6-ombre)}
.v6-page .qw-card.qw-card-selected .qw-card-badge{border-color:transparent;background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}
.v6-page .qw-card.qw-card-selected .qw-card-badge::after{color:var(--v6-bleu)}

/* Le compteur de pages / d'options : pastille pêche pleine, pas un voile
   d'orange à 12 % qu'on distingue à peine du fond. */
.v6-page .qw-chip{background:rgba(var(--v6-peche-rgb),1);color:var(--v6-bleu);font-weight:700}
.v6-page .qw-tooltip-toggle{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}

/* 🔴 UN MESSAGE D'ERREUR N'EST PAS DE L'ENCRE ORDINAIRE. La conversion l'avait
   passé en bleu nuit comme le reste : il devenait indiscernable d'une consigne.
   Il reprend le rouge d'erreur de la charte (6,53:1) et gagne un pictogramme,
   pour ne pas dépendre de la seule couleur. */
.v6-page .qw-error{color:var(--v6-erreur);font-weight:700}
.v6-page .qw-error:not(:empty)::before{content:"\26A0";margin-right:.4rem}

/* La coche d'étape franchie garde son VERT : c'est un état, pas un accent.
   Même raison que les coches de la grille tarifaire. */
.v6-page .qw-steps-list li.qw-step-done::before{border-color:var(--v6-succes);background-color:var(--v6-succes)}

/* Les liens du consentement RGPD : soulignés en orange comme partout. ⚠️ Ils
   doivent rester manifestement cliquables - c'est une case à cocher légale. */
.v6-page main .qw-form-check a{
	color:var(--v6-bleu);text-decoration:underline;
	text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:3px;
}


/* --- 26 ter. LA COLONNE `aside.sidebar-area` ------------------------------
   ⚠️ ENCORE UN COMPOSANT QUI N'EXISTE QU'EN SOMBRE dans theme.css, et que
   light.css n'avait jamais repris : la colonne de progression du
   questionnaire de devis s'en sert, et elle sortait en carte translucide
   quasi-noire posée sur du crème, avec du texte blanc dessus.

   ⚠️ Sa classe est `aside.sidebar-area .widget`, avec la BALISE dans le
   sélecteur : (0,2,1). Une règle sans `aside` ne la bat pas - on garde donc
   exactement la même forme, préfixée par la portée de la charte. */
.v6-page aside.sidebar-area .widget{
	background-color:rgba(var(--v6-blanc-rgb),1);
	border:1px solid var(--v6-line);
	border-radius:var(--v6-r-carte);
}
.v6-page aside.sidebar-area .widget h4{color:var(--v6-bleu)}
.v6-page aside.sidebar-area .cat ul li{background-color:rgba(var(--v6-creme-rgb),1)}
.v6-page aside.sidebar-area .cat ul li a{color:var(--v6-texte)}
.v6-page aside.sidebar-area .cat ul li a i{color:var(--v6-orange)}
.v6-page aside.sidebar-area .cat ul li:hover{background-color:rgba(var(--v6-peche-rgb),1)}
.v6-page aside.sidebar-area .cat ul li:hover a,
.v6-page aside.sidebar-area .cat ul li:hover a i{color:var(--v6-bleu)}
/* L'étape COURANTE porte deux signaux : la pastille pêche pleine ET la
   graisse. ⛔ Pas seulement un fond légèrement teinté : sur un parcours en
   dix étapes, savoir où l'on en est est l'information principale de cette
   colonne. */
.v6-page aside.sidebar-area .cat ul li.active{background-color:rgba(var(--v6-peche-rgb),1);box-shadow:inset 3px 0 0 var(--v6-orange)}
.v6-page aside.sidebar-area .cat ul li.active a{color:var(--v6-bleu)!important;font-weight:800}
/* Les libellés d'étape du questionnaire, dans cette même colonne. */
.v6-page .qw-steps-list li{color:var(--v6-doux)}
.v6-page .qw-steps-list li.qw-step-active{color:var(--v6-bleu);font-weight:800}


/* --- LES BOUTONS `.btn-slide` PILOTES PAR JETONS -------------------------
   theme.css construit ces boutons sur un petit jeu de variables
   (`--btn-bg`, `--btn-color`…) que chaque variante redéfinit. C'est bien vu :
   il suffit donc de rebrancher les VARIANTES, pas de réécrire le composant.

   🔴 `.btn-primo` posait du BLANC sur le rouge de marque - 4,23:1, sous le
   seuil, relevé sur /confirmation-devis. En v6 le fond devient l'orange, et
   le libellé passe au bleu nuit : 5,08:1. Le même geste que sur tous les
   autres boutons pleins du site.
   ⚠️ Ces variantes servent AUSSI dans du contenu rédigé au back-office : les
   rebrancher ici les corrige partout d'un coup, y compris dans les articles. */
.v6-page .btn-primo{
	--btn-bg:rgba(var(--v6-orange-rgb),1);
	--btn-bg-hover:rgba(var(--v6-orange-bas-rgb),1);
	--btn-color:var(--v6-bleu);
	--btn-color-hover:var(--v6-bleu);
	--btn-shadow-rgb:var(--v6-bleu-rgb);
	font-weight:800;
}
.v6-page .btn-primo:hover{box-shadow:var(--v6-ombre)}
/* Les classes utilitaires de Bootstrap pour les etats : on les aligne sur les
   jetons de la charte, sinon une page de confirmation affiche un vert et une
   page d erreur un rouge qui ne sont ceux de personne. */
.v6-page .text-success{color:var(--v6-succes)!important}
.v6-page .text-danger{color:var(--v6-erreur)!important}
/* Les variantes neutres : elles suivent la même logique, encre sur surface. */
.v6-page .btn-light{--btn-bg:rgba(var(--v6-blanc-rgb),1);--btn-bg-hover:rgba(var(--v6-peche-rgb),1);--btn-color:var(--v6-bleu);--btn-color-hover:var(--v6-bleu);--btn-shadow-rgb:var(--v6-bleu-rgb)}
.v6-page .btn-medium,
.v6-page .btn-darkest,
.v6-page .btn-black{--btn-bg:rgba(var(--v6-bleu-rgb),1);--btn-bg-hover:rgba(var(--v6-orange-rgb),1);--btn-color:var(--v6-blanc);--btn-color-hover:var(--v6-bleu);--btn-shadow-rgb:var(--v6-bleu-rgb)}
/* ⚠️ Le pictogramme de ces boutons est une IMAGE retournée par un filtre
   (`btn-filter-invert-full`), pensée pour un glyphe blanc. Le libellé étant
   passé au bleu nuit, le filtre doit sauter, sinon l'icône reste blanche
   au milieu d'un bouton orange. */
.v6-page .btn-primo.btn-filter-invert-full img,
.v6-page .btn-light.btn-filter-invert-full img{filter:none}

/* ==========================================================================
   27. LA BOUTIQUE : LISTE ET CATEGORIES (.bq-*, .pd-cat-*, .pd-prod-*)
   ----------------------------------------------------------------------
   Portee le 2026-08-25, DEBUT DE LA MIGRATION DU TUNNEL DE VENTE.

   ⚠️ Le parcours d'achat etait la derniere partie du site restee sur
   l'ancienne charte : un visiteur qui passait d'une page migree au panier
   changeait litteralement de site - logo, couleurs, pied de page.
   Arbitrages en 27 bis.
   ========================================================================== */
.v6-page .pd-badge-compat{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);color:var(--v6-bleu);font-size:.85rem}
.v6-page .pd-desc :where(i[class*="fa-"],svg){color:var(--v6-bleu)!important}
.v6-page .pd-desc .pd-dark :where(i[class*="fa-"],svg){color:rgba(214,228,242,.92)!important}
@media(min-width:992px){
	.v6-page .pd-desc .row.g-3 > [class*="col-"]{flex:0 0 auto;width:33.3333%}
}
.v6-page .bq-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem;padding-bottom:1rem;border-bottom:1px solid var(--v6-line)}
.v6-page .bq-topbar-left{display:flex;flex-direction:column;gap:.15rem}
.v6-page .pd-cat-title{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);font-weight:800;color:var(--v6-bleu);margin:0;line-height:1.1}
.v6-page .bq-topbar-count{font-size:.9rem;color:rgba(var(--v6-bleu-rgb),.7);font-weight:600}
.v6-page .bq-topbar-right{display:flex;align-items:center;gap:.5rem}
.v6-page .bq-topbar-right select{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:.6rem;padding:.5rem 1rem;color:var(--v6-bleu);font-family:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.v6-page .bq-topbar-right select:focus{outline:2px solid rgba(var(--v6-orange-rgb),.6);outline-offset:1px}
.v6-page .bq-filter-btn-mobile{display:none;align-items:center;gap:.4rem;padding:.5rem .95rem;background:rgba(var(--v6-bleu-rgb),1);color:rgba(var(--v6-blanc-rgb),1);border:none;border-radius:.6rem;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap}
.v6-page .bq-filter-btn-mobile:hover{background:rgba(var(--v6-bleu-rgb),1)}
.v6-page .pd-cat-side .sidebar-area .widget{background:transparent;border:0;padding:0;margin:0}
.v6-page .pd-cat-side .sidebar-area .widget h4{color:var(--v6-bleu)!important;font-size:1.15rem;font-weight:800;margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:1px solid var(--v6-line)}
.v6-page .pd-cat-side .cat .pd-cat-tree,.v6-page .pd-cat-side .cat .pd-cat-tree ul{list-style:none;margin:0;padding:0}
.v6-page .pd-cat-side .cat .pd-cat-tree li{background:transparent;padding:0;margin:0 0 .1rem}
.v6-page .pd-cat-side .cat .pd-cat-tree a{display:block;padding:.55rem .7rem;border-radius:.5rem;color:var(--v6-texte)!important;font-weight:600;font-size:.95rem;text-decoration:none;transition:background .15s,color .15s}
.v6-page .pd-cat-side .cat .pd-cat-tree a:hover{background:var(--v6-line);color:var(--v6-bleu)!important}
.v6-page .pd-cat-side .cat .pd-cat-tree .pd-cat-all a i{margin-right:.5rem;font-size:.8rem;color:var(--v6-bleu)}
.v6-page .pd-cat-side details.pd-acc > summary{list-style:none;display:flex;align-items:center;gap:.35rem;cursor:pointer;border-radius:.5rem;padding-right:.35rem}
.v6-page .pd-cat-side details.pd-acc > summary::-webkit-details-marker{display:none}
.v6-page .pd-cat-side details.pd-acc > summary .pd-acc-lbl{flex:1 1 auto}
.v6-page .pd-cat-side details.pd-acc > summary::after{content:"+";flex:0 0 auto;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;line-height:1;color:var(--v6-bleu);border-radius:.35rem;background:var(--v6-line)}
.v6-page .pd-cat-side details.pd-acc[open] > summary::after{content:"\2212"}
.v6-page .pd-cat-side details.pd-acc > summary:hover{background:var(--v6-line)}
.v6-page .pd-cat-side .cat .pd-cat-tree ul.niveau-2{margin:.15rem 0 .45rem .55rem;padding-left:.55rem;border-left:2px solid var(--v6-line)}
.v6-page .pd-cat-side .cat .pd-cat-tree ul.niveau-2 a{font-size:.9rem;font-weight:500;padding:.42rem .7rem}
.v6-page .pd-cat-side .cat .pd-cat-tree li.active > a,
.v6-page .pd-cat-side .cat .pd-cat-tree summary.active .pd-acc-lbl{background:transparent;color:var(--v6-bleu)!important;font-weight:700}
.v6-page .pd-prod-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:stretch}
@media(min-width:576px){
	.v6-page .pd-prod-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:992px){
	.v6-page .pd-prod-grid{grid-template-columns:repeat(3,1fr)}
}
.v6-page .pd-prod-card{position:relative;background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:1rem;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.v6-page .pd-prod-card:hover{box-shadow:0 12px 32px rgba(var(--v6-bleu-rgb),.13);transform:translateY(-3px)}
.v6-page .pd-prod-media{position:relative;display:block;aspect-ratio:1/1;background:rgba(var(--v6-blanc-rgb),1);overflow:hidden;border-bottom:1px solid var(--v6-line)}
.v6-page .pd-prod-media img{width:100%;height:100%;object-fit:contain;padding:1.1rem}
.v6-page .pd-prod-media .badge{position:absolute;top:.8rem;left:.8rem;z-index:2}
.v6-page .pd-prod-body{padding:1rem 1.1rem .6rem;flex:1 1 auto;display:flex;flex-direction:column;gap:.45rem}
.v6-page .pd-prod-title{font-size:1.05rem;font-weight:700;margin:0;line-height:1.25}
.v6-page .pd-prod-title a{color:var(--v6-bleu);text-decoration:none}
.v6-page .pd-prod-title a:hover{color:var(--v6-bleu)}
.v6-page .pd-prod-price{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-top:.1rem}
.v6-page .pd-prod-price .now{font-size:1.45rem;font-weight:900;color:var(--v6-bleu);letter-spacing:-.02em;line-height:1}
.v6-page .pd-prod-price .ht{font-size:.75rem;color:rgba(var(--v6-bleu-rgb),.7);font-weight:600}
.v6-page .pd-prod-price del{font-size:.9rem;color:var(--v6-bleu);font-weight:600}
.v6-page .pd-prod-recap{font-size:.85rem;color:var(--v6-doux);line-height:1.5;margin:.1rem 0 0}
.v6-page .pd-prod-foot{margin-top:auto;padding:.55rem .1rem .85rem;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;border-top:1px solid var(--v6-line)}
.v6-page .pd-prod-foot .badge{background:rgba(209,219,228,.4);border:1px solid rgba(209,219,228,.85);color:var(--v6-texte);font-weight:500}
.v6-page .pd-cat-side .bq-encart{font-size:.85rem;line-height:1.55;color:var(--v6-texte)}
.v6-page .pd-cat-side .bq-encart h4 i{color:var(--v6-bleu);font-size:.85rem;margin-right:.2rem}
.v6-page .pd-cat-side .bq-encart p{margin:0 0 .55rem}
.v6-page .pd-cat-side .bq-encart-cta{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.85rem;text-decoration:none;color:var(--v6-bleu)!important;padding:0!important}
.v6-page .pd-cat-side .bq-encart-cta:hover{color:var(--v6-bleu)!important;background:transparent!important;gap:.55rem}
.v6-page .pd-cat-side .bq-encart-cta i{font-size:.75rem;transition:transform .15s}
.v6-page .bq-empty{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);border-radius:1rem;padding:2.5rem 1.5rem;text-align:center;color:var(--v6-texte)}
.v6-page .bq-empty h2{color:var(--v6-bleu)}
.v6-page .bq-loader{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2.5rem}
.v6-page .bq-loader[hidden],.v6-page .bq-load-error[hidden],.v6-page .bq-load-more[hidden],.v6-page .bq-end-msg[hidden]{display:none}
.v6-page .bq-spinner{width:28px;height:28px;border:3px solid var(--v6-line);border-top-color:var(--v6-orange);border-radius:50%;animation:bqSpin .6s linear infinite}
.v6-page .bq-loader-text{font-size:.85rem;color:rgba(var(--v6-bleu-rgb),.7)}
.v6-page .bq-load-error{margin-top:1.5rem;padding:1rem;border-radius:.75rem;background:rgba(var(--v6-orange-rgb),.08);border:1px solid rgba(var(--v6-orange-rgb),.3);color:var(--v6-bleu);text-align:center;font-size:.9rem}
.v6-page .bq-load-error button,.v6-page .bq-load-more button{font-family:inherit;font-weight:600;cursor:pointer;border-radius:.6rem}
.v6-page .bq-load-error button{background:var(--v6-orange);color:rgba(var(--v6-blanc-rgb),1);border:none;padding:.4rem .9rem;margin-left:.4rem}
.v6-page .bq-load-more{display:flex;justify-content:center;margin-top:1.75rem}
.v6-page .bq-load-more button{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);border:1px solid var(--v6-line);padding:.7rem 1.6rem;font-size:.9rem}
.v6-page .bq-load-more button:hover{background:rgba(209,219,228,.4)}
.v6-page .bq-end-msg{text-align:center;padding:2rem;font-size:.85rem;color:rgba(var(--v6-bleu-rgb),.55);font-weight:500}
.v6-page .bq-sentinel{height:1px}
.v6-page body.bq-noscroll{overflow:hidden}
.v6-page .bq-mobile-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(var(--v6-bleu-rgb),.5)}
.v6-page .bq-mobile-backdrop[hidden],.v6-page .bq-mobile-panel[hidden]{display:none}
.v6-page .bq-mobile-panel{position:fixed;top:0;left:0;bottom:0;width:min(88vw,360px);z-index:9999;background:rgba(var(--v6-blanc-rgb),1);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 40px rgba(var(--v6-bleu-rgb),.3)}
.v6-page .bq-mobile-panel-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--v6-line);color:var(--v6-bleu)}
.v6-page .bq-mobile-panel-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--v6-bleu);cursor:pointer;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.4rem}
.v6-page .bq-mobile-panel-close:hover{background:var(--v6-line)}
.v6-page .bq-mobile-panel-body{flex:1 1 auto;overflow-y:auto;padding:1.1rem 1.25rem 2rem}
.v6-page .bq-mobile-panel-h{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--v6-doux);margin:0 0 .6rem}
.v6-page .bq-mobile-panel-body select{width:100%;padding:.6rem .75rem;border:1px solid var(--v6-line);border-radius:.6rem;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--v6-bleu);background:rgba(var(--v6-blanc-rgb),1);margin-bottom:1.4rem}
.v6-page .bq-mobile-panel-body .sidebar-area{margin:0}
@media(max-width:991.98px){
	.v6-page .bq-filter-btn-mobile{display:flex}
	.v6-page .bq-topbar-right{display:none}
}

/* --- 27 bis. LES ARBITRAGES DE LA BOUTIQUE -------------------------------
   ⚠️ ON ENTRE DANS LE TUNNEL DE VENTE. Ces pages encaissent de l'argent : une
   couleur mal posée n'y coûte pas du style, elle coûte une commande. Deux
   règles de prudence s'ajoutent à celles des autres pages :

   1. UN PRIX EST TOUJOURS LISIBLE AU CONTRASTE PLEIN. Jamais d'accent, jamais
      de gris doux, jamais sur une surface teintée. Un prix est LE contenu.
   2. UN ÉTAT DE STOCK OU DE PROMOTION NE SE DIT PAS QUE PAR LA COULEUR : il
      porte toujours un mot ou un pictogramme en plus. */

/* Le nom d'un produit au survol : la conversion l'avait rendu identique au
   repos, donc sans retour. Soulignement orange, comme partout ailleurs.
   🔴 `main` dans le sélecteur : le lien du titre n'a pas de classe, il tombait
   sinon dans le filet de sécurité de la charte. */
.v6-page main .pd-prod-title a{color:var(--v6-bleu);text-decoration:none}
.v6-page main .pd-prod-title a:hover{
	color:var(--v6-bleu);text-decoration:underline;
	text-decoration-color:var(--v6-orange);text-decoration-thickness:2px;text-underline-offset:3px;
}
/* ⚠️ Le prix BARRÉ doit se distinguer du prix courant SANS dépendre de la
   barre seule : il passe en gris doux. La conversion les avait rendus de la
   même couleur - deux prix identiques côte à côte, dont un barré. */
.v6-page .pd-prod-price del{color:var(--v6-doux);font-weight:600}
/* Les étiquettes du pied de carte (« dématérialisé », « livraison »…) : la
   conversion leur avait laissé un gris bleuté hors charte. */
.v6-page .pd-prod-foot .badge{
	background:rgba(var(--v6-peche-rgb),1);border:1px solid transparent;
	color:var(--v6-bleu);font-weight:600;
}

/* Le bouton « réessayer » du chargement : bleu nuit sur l'orange. ⛔ Le blanc
   n'y vaut que 2,40:1 - et c'est le bouton qui rattrape une liste de produits
   qui ne s'est pas chargée. */
.v6-page .bq-load-error button{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);font-weight:800}
.v6-page .bq-load-more button:hover{background:rgba(var(--v6-peche-rgb),1);border-color:var(--v6-orange);color:var(--v6-bleu)}
/* Le message de fin de liste et le compteur : encre douce de la charte, pas un
   bleu nuit dilué à 55 % qui tombe sous le seuil. */
.v6-page .bq-end-msg,
.v6-page .bq-topbar-count,
.v6-page .bq-loader-text{color:var(--v6-doux)}
.v6-page .pd-prod-price .ht{color:var(--v6-doux)}

/* Les pictogrammes de la colonne de catégories et de l'encart : ils sont
   décoratifs, ils prennent l'accent. */
.v6-page .pd-cat-side .cat .pd-cat-tree .pd-cat-all a i,
.v6-page .pd-cat-side .bq-encart h4 i{color:var(--v6-orange)}
/* ⚠️ La catégorie COURANTE porte deux signaux, comme partout : la graisse ET
   une pastille pêche. Un simple changement de graisse ne se voit pas dans une
   liste de quinze entrées. */
.v6-page .pd-cat-side .cat .pd-cat-tree li.active > a,
.v6-page .pd-cat-side .cat .pd-cat-tree summary.active .pd-acc-lbl{
	background:rgba(var(--v6-peche-rgb),1)!important;
	color:var(--v6-bleu)!important;font-weight:800;
}
.v6-page .pd-cat-side .cat .pd-cat-tree a:hover{background:rgba(var(--v6-peche-rgb),.6);color:var(--v6-bleu)!important}
.v6-page .pd-cat-side details.pd-acc > summary:hover{background:rgba(var(--v6-peche-rgb),.6)}
.v6-page .pd-cat-side details.pd-acc > summary::after{background:rgba(var(--v6-peche-rgb),1);color:var(--v6-bleu)}
/* Le lien de l'encart : il se lit comme un lien. */
.v6-page .pd-cat-side .bq-encart-cta{
	color:var(--v6-bleu)!important;
	text-decoration:underline!important;text-decoration-color:var(--v6-orange)!important;
	text-decoration-thickness:2px;text-underline-offset:3px;
}

/* Le bouton de filtres en mobile : il ouvre le panneau des catégories, c'est
   une action - il prend donc l'orange, pas le bleu nuit d'un lien. */
.v6-page .bq-filter-btn-mobile{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);font-weight:800}
.v6-page .bq-filter-btn-mobile:hover{background:rgba(var(--v6-orange-bas-rgb),1)}

/* Les pictogrammes d'une description produit posée sur une coupe nuit. */
.v6-page .pd-desc :where(i[class*="fa-"],svg){color:var(--v6-orange)!important}
.v6-page .pd-desc .pd-dark :where(i[class*="fa-"],svg){color:var(--v6-orange)!important}

@media(prefers-reduced-motion:reduce){
	.v6-page .pd-prod-card:hover{transform:none}
	.v6-page .bq-spinner{animation-duration:1.5s}
}


/* --- LES UTILITAIRES BOOTSTRAP, RAMENES DANS LA CHARTE -------------------
   🔴 LE `<html>` DU SITE RESTE EN `data-bs-theme="dark"`, ET C'EST VOULU : le
   panneau de recherche, le menu plein écran et le bandeau de consentement en
   dépendent. Mais Bootstrap en déduit tout son jeu d'utilitaires : `.text-muted`
   y vaut `rgba(255,255,255,.8)`, les fonds `-subtle` y sont des quasi-noirs
   teintés, et `<code>` y est rose.

   Posés sur le crème, ces utilitaires donnent du **texte blanc sur blanc** -
   1,07:1, relevé sur la fiche produit. Or ils sont partout : 40 `.text-muted`
   rien que dans les gabarits, et ils apparaissent aussi dans du contenu rédigé
   au back-office, donc hors de tout contrôle de gabarit.

   ⚠️ On les redéfinit ici, pour les pages v6 seulement. ⛔ Ne PAS basculer
   `data-bs-theme` en `light` pour régler ça : ça repeindrait d'un coup la
   recherche, le menu et tarteaucitron, qui sont sombres à dessein.
   ⚠️ `!important` est nécessaire : les utilitaires Bootstrap en portent un. */
.v6-page .text-muted{color:var(--v6-doux)!important}
.v6-page .text-body,
.v6-page .text-body-secondary{color:var(--v6-texte)!important}
.v6-page .text-secondary{color:var(--v6-doux)!important}
.v6-page .text-primary,
.v6-page .text-dark{color:var(--v6-bleu)!important}
.v6-page .text-info{color:var(--v6-bleu)!important}
.v6-page .text-warning{color:var(--v6-bleu)!important}
/* Les fonds pleins : le libellé qu'ils portent doit suivre. */
.v6-page .bg-primary,
.v6-page .bg-dark,
.v6-page .bg-secondary{background-color:rgba(var(--v6-bleu-rgb),1)!important;color:var(--v6-blanc)!important}
.v6-page .bg-light{background-color:rgba(var(--v6-blanc-rgb),1)!important;color:var(--v6-bleu)!important}
.v6-page .bg-success{background-color:var(--v6-succes)!important;color:var(--v6-blanc)!important}
.v6-page .bg-danger{background-color:var(--v6-erreur)!important;color:var(--v6-blanc)!important}
/* Les variantes « subtle » : une surface TRES claire teintée par l'état, avec
   l'encre de l'état par-dessus. En thème sombre Bootstrap fait l'inverse - un
   fond quasi-noir - d'où le vert sur presque noir mesuré à 3,33:1. */
/* ⚠️ Le voile est a 8 % et non 12 % : a 12 % sur le creme, l'encre verte de
   l'etat tombe a 4,29:1 - juste sous le seuil. Mesure sur la pastille
   « Vendu a l'unite » de la fiche produit. Un fond teinte assombrit toujours
   le rapport de ce qu'on ecrit dessus, et sur une pastille de 12 px on n'a
   aucune marge. */
.v6-page .bg-success-subtle{background-color:rgba(var(--v6-succes-rgb),.08)!important;color:var(--v6-succes)!important}
.v6-page .bg-danger-subtle{background-color:rgba(var(--v6-erreur-rgb),.08)!important;color:var(--v6-erreur)!important}
.v6-page .bg-warning-subtle,
.v6-page .bg-info-subtle,
.v6-page .bg-primary-subtle,
.v6-page .bg-secondary-subtle{background-color:rgba(var(--v6-peche-rgb),1)!important;color:var(--v6-bleu)!important}
.v6-page .border-success-subtle{border-color:rgba(var(--v6-succes-rgb),.35)!important}
.v6-page .border-danger-subtle{border-color:rgba(var(--v6-erreur-rgb),.35)!important}
.v6-page .text-success-emphasis{color:var(--v6-succes)!important}
.v6-page .text-danger-emphasis{color:var(--v6-erreur)!important}
/* ⚠️ `.text-success` et `.text-danger` sont deja repris plus haut avec les
   jetons d'etat : ils ne sont pas redefinis ici pour ne pas avoir deux
   definitions du meme utilitaire dans la meme feuille. */

/* `<code>` et `<kbd>` dans du contenu redige : Bootstrap les met en rose sur
   fond sombre. Ici, une pastille discrete a encre pleine. */
.v6-page code{
	color:var(--v6-bleu);background:rgba(var(--v6-peche-rgb),1);
	padding:.12em .4em;border-radius:.3em;font-size:.9em;
}
.v6-page pre code{background:none;padding:0}
.v6-page kbd{background:rgba(var(--v6-bleu-rgb),1);color:var(--v6-blanc)}

/* Les bandeaux `.alert` : theme.css leur donne un jeu de jetons propre
   (`--sv-alert-*`), ce qui est bien vu - il suffit de rebrancher les jetons.
   🔴 Leurs encres etaient trop claires pour un fond clair : #d73d3d sur son
   propre fond #fdecec ne donne que 3,98:1. Un message d'erreur est justement
   ce qu'il ne faut PAS avoir a deviner. On reprend les jetons d'etat de la
   charte, mesures pour du texte.
   ⚠️ Bootstrap definit AUSSI `.alert-info` et consorts : ils sont repris ici
   pour qu'un bandeau ne depende pas de la feuille qui a gagne. */
.v6-page .alert-danger{--sv-alert-color:var(--v6-erreur);--sv-alert-bg:rgba(var(--v6-erreur-rgb),.08);--sv-alert-border-color:rgba(var(--v6-erreur-rgb),.45)}
.v6-page .alert-success{--sv-alert-color:var(--v6-succes);--sv-alert-bg:rgba(var(--v6-succes-rgb),.08);--sv-alert-border-color:rgba(var(--v6-succes-rgb),.45)}
.v6-page .alert-warning{--sv-alert-color:var(--v6-attente);--sv-alert-bg:rgba(var(--v6-attente-rgb),.10);--sv-alert-border-color:rgba(var(--v6-attente-rgb),.40)}
.v6-page .alert-info,
.v6-page .alert-secondary{--sv-alert-color:var(--v6-bleu);--sv-alert-bg:rgba(var(--v6-peche-rgb),1);--sv-alert-border-color:var(--v6-orange)}
/* ⚠️ Et les memes en variables Bootstrap, pour les bandeaux qui passent par
   son implementation plutot que par celle de theme.css. */
.v6-page .alert-danger{--bs-alert-color:var(--v6-erreur);--bs-alert-bg:rgba(var(--v6-erreur-rgb),.08);--bs-alert-border-color:rgba(var(--v6-erreur-rgb),.45)}
.v6-page .alert-success{--bs-alert-color:var(--v6-succes);--bs-alert-bg:rgba(var(--v6-succes-rgb),.08);--bs-alert-border-color:rgba(var(--v6-succes-rgb),.45)}
.v6-page .alert-info,
.v6-page .alert-secondary{--bs-alert-color:var(--v6-bleu);--bs-alert-bg:rgba(var(--v6-peche-rgb),1);--bs-alert-border-color:var(--v6-orange)}
.v6-page .alert-warning{--bs-alert-color:var(--v6-attente);--bs-alert-bg:rgba(var(--v6-attente-rgb),.10);--bs-alert-border-color:rgba(var(--v6-attente-rgb),.40)}
.v6-page .alert a{color:inherit;font-weight:700;text-decoration:underline}

/* La pastille de reassurance de la fiche produit (« paiement securise »…) :
   elle vient du hero de l'accueil, ou elle etait blanche sur du sombre. */
.v6-page .hero-stat-chip{
	background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);
	color:var(--v6-texte)!important;
}
.v6-page .hero-stat-chip i{color:var(--v6-orange)}
/* ⛔ PAS D'OPACITE SUR DU TEXTE, ici non plus : `.opacity-75` de Bootstrap
   fait perdre un quart du contraste a ce qu'il touche. Sur une page v6 il ne
   s'applique plus au texte - ce qui doit etre discret le dit par sa taille. */
.v6-page main span.opacity-75,
.v6-page main small.opacity-75,
.v6-page main p.opacity-75{opacity:1!important}

/* ==========================================================================
   28. LA RESPIRATION SOUS LE FIL D'ARIANE
   ----------------------------------------------------------------------
   🔴 MESURE AVANT CORRECTION, ecart entre le bas du fil et le haut du titre :
   56 px sur /realisations, /blog, /boutique et /recherche · 88 sur /panier ·
   104 sur /faqs · 106 sur /contact · 136 sur /mentions-legales · 138 sur
   /plan-du-site · 165 sur /a-propos. Ce n'est pas un rythme, c'est un
   heritage : chaque famille de pages a garde le rembourrage qu'elle avait
   AVANT que le fil d'Ariane existe, et le fil s'est ajoute par-dessus.

   La regle : la premiere section d'une page qui suit un fil d'Ariane n'a pas
   besoin de 5,5 rem de respiration - le fil separe deja du menu. Elle se cale
   sur 3,5 rem, la valeur des pages qui rendaient bien.

   ⛔ LES HEROS SONT EXCLUS, ET C'EST DELIBERE. Un hero est une BANDE COLOREE :
   son rembourrage n'est pas du vide, c'est la hauteur de la bande, et elle a
   ete arretee avec Stephane. La reduire changerait la maquette, pas un
   espacement. D'ou l'exclusion par `[class*="hero"]`, plus les deux heros qui
   ne portent pas ce mot dans leur nom.

   ⚠️ Le selecteur s'appuie sur `\.v6-fil + main` : le fil est le frere qui
   PRECEDE `<main>`, jamais son enfant. Une page sans fil garde donc son
   rythme plein - c'est le cas de l'accueil, qui doit s'ouvrir sur son hero.

   ⛔ ET SEULEMENT LA PREMIERE SECTION (`:first-child`). Poser 1,5 rem sur
   `\.section-dark` tout court aurait ecrase les SEPT sections de /a-propos, dont
   quatre en milieu de page : leur rythme serait tombe de 88 px a 24 px entre
   deux blocs de contenu. Ce qu'on veut supprimer, c'est le vide SOUS LE FIL,
   pas la respiration entre les sections. */
.v6-page .v6-fil + main > section:first-child:not([class*="hero"]):not(.prp-hero-illicado):not(.acroia-section),
.v6-page .v6-fil + main > .of-page > section:first-child:not([class*="hero"]),
.v6-page .v6-fil + main > .pd-blog > section:first-child:not([class*="hero"]){
	padding-top:1.5rem;
}

/* --- 29. DEUX COMPOSANTS PARTAGES OUBLIES AU PORTAGE --------------------
   🔴 `\.pd-why` ET `\.pd-flow` N'AVAIENT PAS ETE PORTES. Ils ne sont cites nulle
   part dans les gabarits que j'ai inventories - ils viennent du CONTENU REDIGE
   AU BACK-OFFICE, dans la description des fiches produit. C'est exactement le
   genre de composant qu'un inventaire par `grep` sur les fichiers PHP ne peut
   pas trouver : son markup est en base.
   ⚠️ A retenir pour la suite : tout ce que le back-office peut ecrire doit etre
   verifie SUR UNE PAGE REELLE, pas dans les sources.

   Symptome : `\.pd-why` perdait son `list-style:none`, donc la puce native du
   navigateur s'ajoutait a l'icone deja saisie dans le texte - DEUX puces par
   ligne, sur les fiches produit. */
.v6-page .pd-why{margin:0;padding:0;list-style:none}
.v6-page .pd-why li{display:flex;gap:.65rem;padding:.7rem 0;border-bottom:1px solid var(--v6-line)}
.v6-page .pd-why li:first-child{padding-top:0}
.v6-page .pd-why li:last-child{padding-bottom:0;border-bottom:0}
.v6-page .pd-why i{margin-top:.15rem;flex:0 0 auto;color:var(--v6-orange)}
/* Dans une coupe nuit, le filet de separation s'inverse. */
.v6-page .pd-dark .pd-why li{border-bottom-color:rgba(var(--v6-blanc-rgb),.16)}
/* ⚠️ La derniere ligne d'une liste n'a ni filet ni rembourrage bas : un
   paragraphe qui suit la liste s'y collait. Le contenu vient du back-office,
   on ne peut pas compter sur une marge dans le markup. */
.v6-page .pd-why + p,
.v6-page .pd-why + div{margin-top:1rem}

/* La chronologie verticale. ⚠️ Elle etait dessinee POUR UN FOND SOMBRE (pastilles
   blanches, filet blanc a 16 %) : sur une carte claire elle disparaissait. Elle
   prend donc les jetons, et garde sa variante inversee pour les coupes nuit. */
.v6-page .pd-flow{margin:0;padding:0;list-style:none;position:relative}
.v6-page .pd-flow li{position:relative;padding:0 0 1.35rem 1.6rem}
.v6-page .pd-flow li:last-child{padding-bottom:0}
.v6-page .pd-flow li::before{content:"";position:absolute;left:.31rem;top:.55rem;bottom:-.15rem;width:2px;background:var(--v6-line)}
.v6-page .pd-flow li:last-child::before{display:none}
.v6-page .pd-flow li::after{content:"";position:absolute;left:0;top:.35rem;width:.72rem;height:.72rem;border-radius:50%;background:rgba(var(--v6-orange-rgb),1);box-shadow:0 0 0 3px rgba(var(--v6-orange-rgb),.22)}
.v6-page .pd-flow-step{display:block;font-weight:700;color:var(--v6-bleu);line-height:1.3}
.v6-page .pd-flow-sub{color:var(--v6-doux);font-size:.9rem}
.v6-page .pd-dark .pd-flow li::before{background:rgba(var(--v6-blanc-rgb),.16)}
.v6-page .pd-dark .pd-flow-step{color:var(--v6-blanc)}
.v6-page .pd-dark .pd-flow-sub{color:var(--v6-bleu-clair)}

@media (prefers-reduced-motion:reduce){
	.v6-page .tp-hero-card{animation:none;transform:rotate(-1deg)}
}
.v6-page section.pricing .billing-switch{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);box-shadow:0 6px 18px rgba(var(--v6-bleu-rgb),.08)}
.v6-page section.pricing .billing-btn{color:var(--v6-doux)}
.v6-page section.pricing .billing-btn:hover{color:var(--v6-bleu);background:rgba(var(--v6-orange-rgb),.07)}
.v6-page section.pricing .billing-btn.active{background:var(--v6-orange);color:rgba(var(--v6-blanc-rgb),1)}
.v6-page section.pricing .billing-btn:focus-visible{outline:2px solid var(--v6-orange);outline-offset:2px}
.v6-page .pricing-card{background:rgba(var(--v6-blanc-rgb),1);border:1px solid var(--v6-line);box-shadow:0 10px 28px rgba(var(--v6-bleu-rgb),.09);text-align:left;padding:1.6rem 1.4rem}
.v6-page .pricing-card:hover{border-color:rgba(var(--v6-orange-rgb),.35);box-shadow:0 16px 40px rgba(var(--v6-bleu-rgb),.14)}
.v6-page .pricing-card.is-popular{border-color:var(--v6-orange);box-shadow:0 16px 40px rgba(220,9,48,.12)}
.v6-page .pricing-card .card-badge{background:rgba(var(--v6-orange-rgb),.10);color:#B00726;align-self:flex-start}
.v6-page .pricing-card h2{color:var(--v6-bleu);margin:0 0 .35rem;letter-spacing:-.01em}
.v6-page .pricing-card .card-short{color:var(--v6-doux);min-height:0;margin-bottom:1rem}
.v6-page .pricing-card .card-price,
.v6-page .pricing-card.is-popular .card-price{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--v6-bleu);display:flex;align-items:baseline;gap:.3rem;justify-content:flex-start;border:0;padding:0;font-size:2.4rem;line-height:1}
.v6-page .pricing-card.is-popular .card-price{color:var(--v6-bleu)}
.v6-page .pricing-card .card-price .currency{-webkit-text-fill-color:currentColor;color:rgba(var(--v6-bleu-rgb),.70);font-size:.8rem;font-weight:600}
.v6-page .pricing-card .card-monthly{color:rgba(var(--v6-bleu-rgb),.72);margin-bottom:.15rem;font-size:.8rem}
.v6-page .pricing-card .card-monthly strong,
.v6-page .pricing-card.is-popular .card-monthly strong{color:var(--v6-bleu)}
.v6-page .pricing-card .price-note{text-align:left;color:var(--v6-bleu);opacity:1;font-size:.8rem;min-height:1.1em;margin:0 0 1rem}
.v6-page .tp-inherit{display:flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;color:var(--v6-bleu);background:rgba(var(--v6-orange-rgb),.07);border-left:3px solid rgba(var(--v6-orange-rgb),.55);border-radius:0 .4rem .4rem 0;padding:.5rem .7rem;margin:0 0 .85rem}
.v6-page .tp-base{font-size:.72rem;font-weight:700;color:var(--v6-doux);text-transform:uppercase;letter-spacing:.07em;margin:0 0 .85rem}
.v6-page .pricing-card ul li{color:rgba(var(--v6-bleu-rgb),.92);font-size:.83rem;margin-bottom:.5rem}
.v6-page .pricing-card ul li sup{color:rgba(var(--v6-bleu-rgb),.7)}
.v6-page .pricing-card .card-cta{margin-top:auto;padding-top:1.1rem}
.v6-page .pricing-card .expand.with-gradient{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}
.v6-page .plan-badge{border-color:rgba(var(--v6-blanc-rgb),.22);color:rgba(var(--v6-blanc-rgb),.82)}
.v6-page .plan-badge:hover{background:rgba(var(--v6-blanc-rgb),.10);color:rgba(var(--v6-blanc-rgb),1);border-color:rgba(var(--v6-blanc-rgb),.4)}
.v6-page .plan-badge.is-active{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu);border-color:rgba(var(--v6-blanc-rgb),1)}
.v6-page .tp-audit{background:linear-gradient(135deg,#0b2540 0%,#192340 55%,#2e203f 100%);border:1px solid rgba(var(--v6-blanc-rgb),.08);border-radius:1.15rem;padding:2.4rem 2rem;box-shadow:0 24px 60px rgba(var(--v6-bleu-rgb),.30);display:grid;gap:1.75rem;align-items:center;position:relative;overflow:hidden}
.v6-page .tp-audit::before{content:'';position:absolute;top:0;right:0;width:340px;height:340px;background:radial-gradient(circle,rgba(var(--v6-orange-rgb),.16) 0%,transparent 70%);border-radius:50%;transform:translate(28%,-28%);pointer-events:none}
.v6-page .tp-audit > *{position:relative;z-index:1}
@media(min-width:992px){
	.v6-page .tp-audit{grid-template-columns:1.35fr .65fr}
}
.v6-page .tp-audit h2{color:rgba(var(--v6-blanc-rgb),1);margin:0 0 .6rem}
.v6-page .tp-audit p{color:rgba(var(--v6-blanc-rgb),.84);line-height:1.7;margin:0 0 .9rem}
.v6-page .tp-audit-cases{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.v6-page .tp-audit-cases li{font-size:.78rem;font-weight:600;color:rgba(var(--v6-blanc-rgb),.9);background:rgba(var(--v6-blanc-rgb),.10);border:1px solid rgba(var(--v6-blanc-rgb),.14);border-radius:999px;padding:.3rem .7rem}
.v6-page .tp-audit-price{text-align:center;background:rgba(var(--v6-blanc-rgb),.06);border:1px dashed rgba(var(--v6-blanc-rgb),.28);border-radius:.85rem;padding:1.4rem 1rem}
.v6-page .tp-audit-amount{display:block;font-size:2.5rem;font-weight:800;line-height:1;color:rgba(var(--v6-blanc-rgb),1)}
.v6-page .tp-audit-unit{display:block;font-size:.78rem;font-weight:600;color:rgba(var(--v6-blanc-rgb),.82);margin-top:.3rem}
.v6-page .tp-audit-price .btn{margin-top:.9rem}
.v6-page .tp-audit-price .tp-audit-alt{margin-top:.55rem;font-size:.86rem;padding:.5rem .8rem;border-color:rgba(var(--v6-blanc-rgb),.42);color:rgba(var(--v6-blanc-rgb),.92)}
.v6-page .tp-audit-price .tp-audit-alt:hover,
.v6-page .tp-audit-price .tp-audit-alt:focus-visible{background:rgba(var(--v6-blanc-rgb),.14);border-color:rgba(var(--v6-blanc-rgb),1);color:rgba(var(--v6-blanc-rgb),1)}
.v6-page .tp-faq-side{display:flex;flex-direction:column;height:100%}
.v6-page .tp-faq-side .of-eyebrow{color:#ff8aa0}
.v6-page .tp-faq-side h2{color:rgba(var(--v6-blanc-rgb),1);margin:0 0 .7rem}
.v6-page .tp-faq-side p{color:rgba(var(--v6-blanc-rgb),.82);line-height:1.7}
.v6-page .tp-faq-side ul{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.6rem}
.v6-page .tp-faq-side ul li{display:flex;gap:.6rem;align-items:flex-start;color:rgba(var(--v6-blanc-rgb),.88);font-size:.88rem;line-height:1.5}
.v6-page .tp-faq-side ul li i{color:#7fb2ea;margin-top:.2rem;flex-shrink:0}
.v6-page .tp-faq-side .tp-faq-actions{margin-top:auto;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.v6-page .tp-faq-side .tp-faq-actions .btn{white-space:nowrap}
@media(min-width:1200px){
	.v6-page .tp-faq-side .tp-faq-actions{flex-wrap:nowrap;justify-content:flex-start;gap:.45rem}
	.v6-page .tp-faq-side .tp-faq-actions .btn{padding-left:.8rem;padding-right:.8rem;font-size:.78rem}
	.v6-page .tp-faq-side .tp-faq-actions .btn i{margin-right:.35rem!important}
}
@media(min-width:992px){
	.v6-page .tp-faq-col{align-self:flex-start;position:sticky;top:calc(var(--acro-nav-h,72px) + 1.5rem)}
}
.v6-page .tp-faq-list .acr-faq-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.v6-page .tp-faq-list .acr-faq{max-width:none;margin-top:0}
.v6-page .tp-trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.25rem 0 0;padding:0;list-style:none}
.v6-page .tp-trust li{display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;font-weight:600;color:var(--v6-doux)}
.v6-page .tp-trust i{color:#15803d}

/* --- 25 bis. LES ARBITRAGES DE /tarifs -----------------------------------
   ⚠️ CETTE PAGE VEND. C'est celle où une couleur mal posée coûte de l'argent :
   un prix illisible, un bouton fantôme, une étiquette « Populaire » qu'on ne
   voit pas. Les arbitrages y sont donc plus prudents qu'ailleurs - dans le
   doute, on prend le contraste plein.

   🔴 La page mélangeait CINQ teintes hors charte (un bleu nuit, un violet, un
   rose, un vert, un rouge sombre), héritées de trois refontes successives.
   Elles convergent : bleu nuit pour les coupes, orange pour l'accent, et le
   vert reste UNIQUEMENT là où il dit « inclus » - un signal d'état, pas une
   décoration. */

/* Les coupes sombres : un aplat BLEU NUIT franc, plus un dégradé à trois
   teintes dont l'une virait au violet. */
.v6-page .tp-hero,
.v6-page .tp-audit{background:rgba(var(--v6-bleu-rgb),1)}
.v6-page .tp-hero h1 .text-red,
.v6-page .tp-hero h1 .text-blue{
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	padding:0 .16em .04em;border-radius:.1em;
	-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* Sur la coupe nuit, les surtitres passent en pastille blanche. ⛔ Pas en
   bleu clair : `#7fb2ea` et `#ff8aa0` étaient lisibles sur du quasi-noir, pas
   sur le bleu nuit de la charte. */
.v6-page .tp-hero .of-eyebrow,
.v6-page .tp-faq-side .of-eyebrow{background:rgba(var(--v6-blanc-rgb),1);color:var(--v6-bleu)}
.v6-page .tp-faq-side ul li i{color:var(--v6-orange)}

/* ⚠️ LE VERT RESTE, et c'est la seule exception de couleur de toute la charte.
   Ces coches disent « c'est inclus dans le forfait » : c'est un signal d'état,
   et un client scanne une grille tarifaire à la couleur avant de lire. Le
   remplacer par de l'orange le confondrait avec l'accent de marque.
   Deux valeurs, parce que le fond change : `--v6-succes` (5,39:1 sur blanc) et
   un vert clair sur la coupe nuit (7,4:1). ⛔ Ne pas les intervertir. */
.v6-page .tp-trust i{color:var(--v6-succes)}
.v6-page .tp-hero .tp-trust i{color:var(--v6-succes-nuit)}

/* La carte du hero : une carte BLANCHE posée sur la coupe nuit. Son filet de
   tête devient orange plein - il passait par un violet au milieu. */
.v6-page .tp-hero-card{background:rgba(var(--v6-blanc-rgb),1);border-color:transparent;box-shadow:var(--v6-ombre)}
.v6-page .tp-hero-card::before{background:rgba(var(--v6-orange-rgb),1)}
/* ⛔ Le halo d'angle est supprimé : à 70 % il passait en ORANGE PLEIN et
   mangeait le coin de la carte. Un halo qui devient opaque n'est plus un halo. */
.v6-page .tp-hero-card::after{content:none}
.v6-page .tp-hero-args li i{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu)}

/* Les cartes de prix. L'étiquette « Populaire » est ce qui oriente le choix :
   elle prend l'orange PLEIN, pas un voile à 10 % avec du rouge sombre dessus. */
/* 🔴 L'ETIQUETTE CHEVAUCHE LE BORD HAUT, comme sur l'accueil - c'est le
   meme geste que `\.v6-etiq--haut`, et il n'y a aucune raison que la page qui
   VEND presente ses paliers autrement que la page qui les annonce.

   ⚠️ CE QUI N'ALLAIT PAS : l'etiquette etait DANS LE FLUX (`align-self`), donc
   elle poussait le titre vers le bas. Resultat, les deux cartes badgees
   avaient leur titre, leur prix et leurs puces DECALES d'une ligne par rapport
   aux deux autres - une grille de comparaison ou les lignes ne s'alignent pas
   ne se compare plus. En la sortant du flux, les quatre colonnes se relisent
   horizontalement.

   ⚠️ `translate(-50%,-50%)` la coupe exactement en deux sur l'arete : moitie
   dehors, moitie dedans. `white-space:nowrap` l'empeche de se casser en deux
   lignes et de perdre son calage vertical. Et `overflow:visible` sur la carte
   est INDISPENSABLE - sans lui la moitie haute serait rognee. */
.v6-page .pricing-card{overflow:visible}
.v6-page .pricing-card .card-badge{
	position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
	align-self:auto;white-space:nowrap;z-index:2;
	background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);
	font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
	padding:.35rem .8rem;border-radius:6px;
}
/* ⚠️ Le meme rembourrage haut pour LES QUATRE cartes, badgee ou non : c'est
   ce qui garantit que les titres restent sur la meme ligne. La valeur laisse
   la place a l'etiquette qui deborde. */
.v6-page .pricing-card{padding-top:1.9rem}
.v6-page .pricing-card.is-popular{box-shadow:var(--v6-ombre)}
/* Le bouton de périodicité : bleu nuit sur l'orange. ⛔ Le blanc n'y vaut que
   2,40:1, et c'est un contrôle, pas de la décoration. */
.v6-page section.pricing .billing-btn.active,
.v6-page .qw-billing-btn.qw-billing-active{background:rgba(var(--v6-orange-rgb),1);color:var(--v6-bleu);font-weight:800}
.v6-page .qw-billing-btn.qw-billing-active{border-color:transparent;box-shadow:var(--v6-ombre-s)}
/* Le rappel de ce qu'un forfait reprend du précédent : c'est la mécanique
   cumulative de la gamme, elle doit se voir. Fond pêche plein. */
.v6-page .tp-inherit{background:rgba(var(--v6-peche-rgb),1);border-left-color:var(--v6-orange)}

@media (prefers-reduced-motion:reduce){
	/* ⚠️ LE BALAYAGE DU BOUTON EST VOLONTAIREMENT CONSERVE ICI.
	   `prefers-reduced-motion` vise les mouvements qui declenchent un trouble
	   vestibulaire : parallaxe, defilement detourne, grands deplacements,
	   lecture automatique. Un aplat de 220 ms a l'interieur d'un bouton de
	   200 px n'en fait pas partie, et c'est la SIGNATURE de la charte : la
	   couper revenait a montrer la charte amputee a tous les postes ou les
	   effets d'animation de Windows sont desactives - celui de Stephane, pour
	   commencer. Ce qui est coupe ci-dessous, en revanche, ce sont les vrais
	   deplacements : cartes qui se soulevent, images qui zooment, panneau de
	   mega-menu qui glisse, anneau du logo qui tourne. */
	.v6-page:not(.v6-mouvement) .v6-logo__o,
	.v6-page:not(.v6-mouvement) .v6-carte,
	.v6-page:not(.v6-mouvement) .v6-tarif,
	.v6-page:not(.v6-mouvement) .v6-produit,
	.v6-page:not(.v6-mouvement) .v6-real__img img,
	.v6-page:not(.v6-mouvement) .v6-lien-fleche,
	.v6-page:not(.v6-mouvement) .v6-mega{transition-property:opacity,visibility,background-color,border-color,color,box-shadow}
	.v6-page:not(.v6-mouvement) .v6-carte:hover,
	.v6-page:not(.v6-mouvement) .v6-tarif:hover,
	.v6-page:not(.v6-mouvement) .v6-produit:hover{transform:none}
	.v6-page:not(.v6-mouvement) .v6-carte:hover .v6-real__img img{transform:none}
	.v6-page:not(.v6-mouvement) .v6-logo:hover .v6-logo__o{transform:rotate(-45deg)}
	.v6-page:not(.v6-mouvement) .v6-lien-fleche:hover{gap:.35rem}
	.v6-page:not(.v6-mouvement) .v6-mega{transform:none}
	/* 🔴 Le bouton de devis ne s'ARRETE pas, il change de nature : le
	   gonflement (un mouvement) laisse la place a un halo qui respire (une
	   variation d'intensite). Ce reglage systeme demande de supprimer le
	   MOUVEMENT, pas de rendre l'interface inerte - et sur les postes ou il est
	   actif, c'est justement le seul signal qui reste pour attirer l'oeil.
	   ⛔ Ne pas remettre `animation:none` ici : le bouton redeviendrait
	   parfaitement immobile chez ceux qui ont ce reglage, c'est-a-dire chez
	   plus de monde qu'on ne croit. */
	.v6-page:not(.v6-mouvement) .v6-nav-cta--reflet::after{
		left:50%;width:62%;
		transform:translateX(-50%) skewX(-14deg);
		animation:v6-reflet-pose 3.4s ease-in-out infinite;
	}
}
