/*
Theme Name: Cburnettweb
Theme URI: https://cburnettweb.com
Author: Cedrick Burnett
Author URI: https://cburnettweb.com
Description: Thème sur mesure du studio Cburnettweb, deuxième génération (Acton Vale, Québec).
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cburnettweb2
*/

/* ==================================================================
   Cburnettweb, deuxième génération

   Direction « A v2 », approuvée le 2026-09-28 : fond noir, turquoise de
   marque, Archivo en largeur variable pour les titres, Martian Mono pour
   les étiquettes. Le travail d'abord, du mouvement, de la couleur.
   La maquette de référence est options/direction.html (hors dépôt).

   Un seul thème sombre, assumé : le studio montre des captures de sites,
   et un fond noir les fait ressortir comme sur un mur de galerie. Pas de
   bascule clair/sombre : c'est un choix de direction, pas un oubli.
   ================================================================== */

/* ---------- Jetons ---------- */
:root {
	--fond: #0E0E0E;
	--fond-2: #171717;
	--texte: #F2F1EC;
	--muet: #8E8D88;
	--trait: rgba(242, 241, 236, .14);
	--turquoise: #22B8C1;
	--sur-turquoise: #0B1112;
	--titre: 'Archivo', system-ui, sans-serif;
	--mono: 'Martian Mono', ui-monospace, monospace;
	/* Trois courbes : --ease rebondit à peine (survols), --smooth accélère et
	   freine (boucles), --sortie freine fort (apparitions). */
	--ease: cubic-bezier(.23, .65, .74, 1.09);
	--smooth: cubic-bezier(.42, .09, .25, 1);
	--sortie: cubic-bezier(.2, .7, .2, 1);
	--gout: clamp(20px, 4vw, 64px);
	color-scheme: dark;
}

/* ---------- Réinitialisation ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/*
 * Filet de sécurité. Le <body> porte les classes de WordPress (page, home,
 * blog, single…) : si un composant venait à s'appeler comme l'une d'elles, la
 * largeur du site entier s'effondrerait sans erreur visible.
 */
body[class] { max-width: none; padding: 0; }

/* Sous la souris, une lueur turquoise sur le noir. Elle était d'abord posée
   section par section et s'arrêtait net au bord de chacune, en ligne droite :
   une seule couche fixe pour toute la page n'a plus de bord. (Une grille de
   mesure l'accompagnait ; retirée, elle faisait « généré ».) */
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 17px/1.55 var(--titre); -webkit-font-smoothing: antialiased; }
/* Filet de sécurité : sur téléphone, le mur 3D du héros laissait une largeur
   de défilement périmée (413 px pour un écran de 375) jusqu'au prochain
   recalcul de mise en page, et la page se laissait tirer de côté. clip, et
   non hidden : clip ne crée pas de conteneur de défilement et ne casse donc
   pas les éléments collants (la colonne de la FAQ). */
body { overflow-x: clip; }
a { color: inherit; }
/* height:auto : sans lui, les dimensions posées contre le décalage de mise en
   page (width/height) écrasent le ratio dès que la largeur est contrainte. */
img, video { display: block; max-width: 100%; height: auto; }
.site-main { display: block; }

/* ---------- Accessibilité ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 999; width: auto; height: auto; padding: .75rem 1rem; clip-path: none; background: var(--turquoise); color: var(--sur-turquoise); }
/* Un anneau de focus visible partout. Le retirer sans le remplacer rend le
   site inutilisable au clavier. */
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }

/* ---------- Curseur contextuel ---------- */
.curseur {
  position: fixed; top: 0; left: 0; z-index: 200; display: grid; place-items: center;
  width: 10px; height: 10px; border-radius: 999px; background: var(--texte); color: var(--sur-turquoise);
  pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, -60px), var(--y, -60px), 0) translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease), background .3s, opacity .2s;
  font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.curseur.est-visible { opacity: 1; }
.curseur.est-ouvert { width: 92px; height: 92px; background: var(--turquoise); }
/* Sur un petit objet (le téléphone d'une réalisation), le disque de 92 px
   couvrait la moitié de l'écran qu'on voulait justement regarder défiler. */
.curseur.est-ouvert.est-petit { width: 56px; height: 56px; font-size: 8px; letter-spacing: .06em; }
.curseur__texte { opacity: 0; transition: opacity .2s; white-space: nowrap; }
.curseur.est-ouvert .curseur__texte { opacity: 1; }
/* La flèche du système disparaît seulement quand le point a pris le relais
   (classe posée par le script au premier mouvement) : si le script échoue,
   on garde la flèche plutôt que de rester sans curseur. Les champs de texte
   gardent leur barre, sinon on ne voit plus où l'on tape. */
.curseur-perso, .curseur-perso * { cursor: none !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(34, 184, 193, .1), transparent 70%);
}
.lueur-active body::before { opacity: 1; }
/* Captures et démos : un clic droit tombait sur l'image et offrait « Ouvrir
   l'image dans un nouvel onglet » et « Enregistrer sous ». Transparentes à la
   souris, elles laissent le clic au cadre (ou au lien de la carte, qui reste
   cliquable) : le menu devient celui de la page. Dissuasif, pas étanche : une
   capture d'écran reste possible. Les images ajoutées par l'éditeur ne sont
   pas visées. */
.mur img, .carte__cadre img, .appareils img, .avap img, .avap video, .demo img {
  pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}
.curseur-perso :is(input:not([type="range"]), textarea, select) { cursor: text !important; }
@media (hover: none), (pointer: coarse) { .curseur { display: none; } }

/* ---------- Révélations partagées (sous .js seulement) ---------- */
.js [data-lignes] .ligne { display: block; overflow: hidden; }
.js [data-lignes] .ligne > span { display: block; transform: translateY(105%); transition: transform .9s var(--sortie); transition-delay: var(--retard, 0s); }
.js [data-lignes].est-revele .ligne > span { transform: none; }

/* ---------- En-tête ---------- */
/* Pas de mix-blend-mode: difference ici : parfait sur du noir et blanc, mais
   au-dessus du turquoise, l'inverse du turquoise donne un saumon criard. Une
   barre sombre floutée apparaît plutôt dès qu'on quitte le haut de page. */
.tete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gout); color: var(--texte); border-bottom: 1px solid transparent;
  font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transition: background .4s var(--smooth), padding .4s var(--smooth), border-color .4s;
}
.tete.est-defile { padding-block: 15px; background: rgba(14, 14, 14, .74); border-bottom-color: var(--trait);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tete a { text-decoration: none; }
.marque { font: 800 21px/1 var(--titre); font-stretch: 125%; letter-spacing: -.03em; text-transform: none; }

/* ---------- Héros : le mur de sites ---------- */
/* clip-path: inset(0) en plus d'overflow: hidden : Chrome laisse parfois
   déborder un plan incliné en 3D malgré overflow. clip-path coupe tout ce qui
   est peint, calques 3D compris — sans lui, le bas du mur, le plus proche de
   l'œil donc le plus grossi, s'étalait sous le héros jusque dans la section
   suivante. */
.heros {
  position: relative; isolation: isolate; overflow: hidden; clip-path: inset(0); min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: end;
  gap: clamp(22px, 3vw, 44px); padding: 130px var(--gout) clamp(28px, 4vw, 56px);
}
/* contain isole le mur : ce qui s'y peint ne force jamais à repeindre le
   reste de la page. */
.mur { position: absolute; inset: 0; z-index: -2; perspective: 1900px; overflow: hidden; clip-path: inset(0); contain: layout paint; }
/* Hors champ, les colonnes s'arrêtent : quarante-huit images qui défilent
   sous une page qu'on ne regarde plus, c'est du travail de GPU pour rien. */
.mur.est-hors-champ .mur__piste { animation-play-state: paused; }
/* Le plan incliné. Sa rotation est pilotée par la souris (variables écrites
   en JS) ; les colonnes, elles, défilent en CSS et continuent même si le JS
   tombe. */
.mur__plan {
  position: absolute; left: 50%; top: 42%; width: 150%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px;
  transform: translate(-50%, -50%) translate3d(var(--dx, 0px), var(--dy, 0px), 0)
             rotateX(var(--rx, 46deg)) rotateZ(var(--rz, -30deg));
  /* Pas de preserve-3d : les images sont plates dans le plan, la perspective
     du parent suffit. preserve-3d garderait un calque 3D par image. */
}
/* 170vh et une inclinaison de 46° : le bord proche du plan reste loin de
   l'œil. Plus haut ou plus penché, il s'approche de la caméra, grossit
   démesurément et finit par déborder. */
.mur__col { height: 170vh; overflow: hidden; }
/* Chaque colonne porte sa liste deux fois ; -50 % boucle sans couture parce
   que chaque image porte sa propre marge basse (un gap laisserait une demi-
   marge de décalage à la jointure). */
.mur__piste { display: flex; flex-direction: column; animation: monter var(--duree, 70s) linear infinite; animation-direction: var(--sens, normal); }
.mur__piste img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; margin-bottom: 26px; border-radius: 8px; }
@keyframes monter { to { transform: translate3d(0, -50%, 0); } }
.heros__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(14,14,14,.55) 0%, rgba(14,14,14,.25) 30%, rgba(14,14,14,.86) 62%, #0E0E0E 88%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(14,14,14,.7) 100%);
}
.surtitre { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #bdbcb6; }
.titre { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); font-weight: 800; }
/* width: max-content : sinon scrollWidth rend la largeur de la colonne au
   lieu de celle du texte, et le titre ne grandit jamais. */
.titre__ligne { display: block; width: max-content; white-space: nowrap; line-height: .84; font-size: 16px; font-stretch: 125%; letter-spacing: -.045em; text-transform: uppercase; }
.titre__ligne--turquoise { color: var(--turquoise); }
/* Les grands titres ajustés sont du lettrage, pas du texte à copier : les
   sélectionner peignait un bloc turquoise de la taille de l'écran. Le texte
   reste lu par les lecteurs d'écran et par Google. */
.titre__ligne { -webkit-user-select: none; user-select: none; }
/* Le reste du site garde la sélection, aux couleurs de la maison. */
::selection { background: var(--turquoise); color: var(--sur-turquoise); }
.js .titre__ligne:not([data-ajuste]) { visibility: hidden; }
.heros__bas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.accroche { margin: 0; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -.012em; max-width: 36ch; }
.heros__droite { display: grid; gap: 18px; justify-items: end; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.bouton {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 22px; border: 1px solid var(--trait);
  text-decoration: none; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(14, 14, 14, .4); backdrop-filter: blur(6px);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .5s var(--sortie);
}
.bouton:hover { border-color: var(--texte); }
.bouton--turquoise { background: var(--turquoise); color: var(--sur-turquoise) !important; border-color: var(--turquoise); }
.bouton--turquoise:hover { background: var(--texte); border-color: var(--texte); }
.faits { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; font: 400 10px/1.4 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .07em; justify-content: flex-end; }
.faits li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--turquoise); vertical-align: 1px; }
@media (max-width: 820px) {
  .heros__bas { grid-template-columns: 1fr; }
  .heros__droite { justify-items: start; }
  .actions, .faits { justify-content: flex-start; }
  .mur__plan { width: 260%; top: 34%; }
}

/* ---------- Ruban turquoise, légèrement de biais ---------- */
.ruban-zone { overflow: hidden; padding: 46px 0; margin-top: -20px; position: relative; z-index: 3; }
.ruban { margin: 0 -4vw; transform: rotate(-2.2deg); background: var(--turquoise); color: var(--sur-turquoise); overflow: hidden; padding: 20px 0; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); }
.ruban__piste { display: flex; width: max-content; animation: defiler 34s linear infinite; }
.ruban__piste span { font: 800 clamp(28px, 4vw, 58px)/1 var(--titre); font-stretch: 120%; letter-spacing: -.03em; text-transform: uppercase; padding-right: .5em; white-space: nowrap; }
.ruban__piste span::after { content: "\2022"; padding-left: .5em; }
@keyframes defiler { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Réalisations : une grille qui défile normalement ----------
   Remplace la galerie horizontale épinglée : elle demandait 3,6 écrans de
   défilement sans que la page descende, et ne montrait qu'un site à la fois.
   Ici, les huit sites tiennent en moins de deux écrans. */
.etiquette { margin: 0; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muet); }
.h2 { margin: 14px 0 0; font: 800 clamp(34px, 5vw, 76px)/.94 var(--titre); font-stretch: 118%; letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.travail { padding: clamp(84px, 11vw, 150px) var(--gout) 0; }
.travail__compte { margin: 0; font: 400 11px/1.5 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .07em; text-align: right; }
/* Douze colonnes : les deux vedettes en 7 + 5, alignées par le bas pour que
   leurs hauts se décalent ; puis deux rangées de trois. */
.galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(16px, 2vw, 32px); align-items: end; margin-top: clamp(36px, 5vw, 64px); }
.carte { grid-column: span 4; text-decoration: none; }
.carte--grande { grid-column: span 7; }
.carte--moyenne { grid-column: span 5; }
@media (max-width: 900px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte, .carte--moyenne { grid-column: span 1; }
  .carte--grande { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .galerie { grid-template-columns: minmax(0, 1fr); } .carte, .carte--moyenne, .carte--grande { grid-column: auto; } }
.carte__cadre {
  position: relative; border-radius: 10px; overflow: hidden; background: var(--fond-2);
  transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .6s var(--sortie), clip-path 1.1s var(--sortie); transition-delay: 0s, var(--retard, 0s);
  box-shadow: 0 50px 90px -45px rgba(0,0,0,.9);
}
.carte__cadre img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1.3s var(--sortie); transition-delay: var(--retard, 0s); }
/* Le rideau : le cadre s'ouvre de bas en haut pendant que la capture se pose.
   Sous .js seulement, et le délai de secours de 3 s rend tout visible si le
   script ne démarre pas. */
.js .carte__cadre { clip-path: inset(100% 0 0 0 round 10px); }
.js .carte__cadre img { transform: scale(1.14); }
.js .carte.est-revele .carte__cadre { clip-path: inset(0 0 0 0 round 10px); }
.js .carte.est-revele .carte__cadre img { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .carte.est-revele:hover .carte__cadre img, .carte:hover .carte__cadre img { transform: scale(1.04); transition-delay: 0s; }
}
.carte__reflet { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.2), transparent 45%); }
.carte:hover .carte__reflet { opacity: 1; }
.carte__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; }
.carte__nom { font: 800 clamp(22px, 2.3vw, 36px)/1 var(--titre); font-stretch: 112%; letter-spacing: -.03em; }
.carte__infos { font: 400 10px/1.6 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .07em; text-align: right; }

/* ---------- Services : un bento de démonstrations ----------
   Chaque tuile MONTRE le service au lieu de le décrire. Les styles de base
   décrivent l'état FINAL (texte tapé, résultats affichés, vraie page) ; les
   keyframes ne font qu'animer vers lui. Sans mouvement ou sans JS, on voit
   donc directement le résultat. Hors champ, les boucles sont en pause. */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.services { padding: clamp(84px, 11vw, 150px) var(--gout); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 5vw, 56px); }
.tuile { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; gap: 24px; min-height: 420px;
  padding: clamp(22px, 2.4vw, 32px); background: var(--fond-2); border: 1px solid var(--trait); border-radius: 14px; }
/* Les grandes tuiles se couchent : texte à gauche, démo à droite. Empilées,
   la démo prenait toute la largeur et la rangée grimpait à 600 px. */
.tuile--large { grid-column: span 2; grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 44px); }
.tuile__tete { align-self: start; }
.tuile--large.tuile--pile { grid-template-columns: none; grid-template-rows: auto 1fr; }
.tuile--pile .tuile__tete { display: flex; justify-content: space-between; align-items: end; gap: 12px 40px; flex-wrap: wrap; }
.tuile--pile .tuile__texte { margin: 0; }
.tuile--large.tuile--pile .demo { align-self: end; }
/* La démo est centrée dans sa colonne : collée en bas à droite, elle laissait
   un grand coin vide en diagonale du texte sur les écrans larges. */
.tuile--large .demo { align-self: center; }
@media (hover: hover) and (pointer: fine) {
  .tuile { transition: border-color .3s; }
  .tuile:not(.tuile--turquoise):hover { border-color: rgba(34, 184, 193, .45); }
}
.tuile--turquoise { background: var(--turquoise); color: var(--sur-turquoise); border-color: transparent; }
.tuile h3 { margin: 0; font: 800 clamp(20px, 1.9vw, 30px)/1 var(--titre); font-stretch: 115%; letter-spacing: -.03em; text-transform: uppercase; }
.tuile__texte { margin: 10px 0 0; color: var(--muet); font-size: 15px; max-width: 42ch; }
.tuile--turquoise .tuile__texte { color: rgba(11, 17, 18, .75); }
.demo { position: relative; align-self: end; }
.js .tuile:not(.est-active) .demo, .js .tuile:not(.est-active) .demo * { animation-play-state: paused !important; }
@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); } .tuile { min-height: 0; }
  .tuile--large { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; }
}

/* Petit navigateur, partagé par les démos */
.navig { border-radius: 10px; overflow: hidden; background: #0f0f0f; border: 1px solid var(--trait); }
.navig__barre { display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-bottom: 1px solid var(--trait); }
.navig__barre i { width: 7px; height: 7px; border-radius: 50%; background: #333; }
.navig__barre span { margin-left: 8px; flex: 1; border-radius: 4px; background: #1c1c1c; padding: 4px 8px; font: 400 9px/1.2 var(--mono); color: var(--muet); }
/* Même rapport que les captures (16:10) : le site entier est visible. Un cadre
   plus haut ou plus large rognait les côtés ou le bas de la page. */
.navig__ecran { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

/* 1 · Sites sur mesure : la page se monte, puis la vraie se déroule dessus */
.mesure .bloc { position: absolute; display: block; background: #2a2a2a; border-radius: 3px; transform-origin: left;
  animation: mesure-bloc 8s var(--sortie) infinite backwards; animation-delay: calc(var(--i) * .07s); }
.mesure .bloc--t { background: var(--turquoise); }
.mesure__rendu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; animation: mesure-rendu 8s var(--smooth) infinite; }
@keyframes mesure-bloc { 0% { transform: scaleX(0); } 6%, 100% { transform: scaleX(1); } }
/* La vraie page arrive vers 1 s et reste affichée six secondes. Dans la
   première version, les blocs gris tenaient l'écran près de 3 s : on
   croyait que l'image chargeait mal. */
@keyframes mesure-rendu { 0%, 11% { clip-path: inset(100% 0 0 0); opacity: 1; } 21%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

/* 2 · Refonte : curseur avant / après. Un vrai <input type="range"> par-dessus :
   clavier, tactile et lecteur d'écran fonctionnent sans code maison. */
.avap { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); }
.avap:has(:focus-visible) { outline: 2px solid var(--turquoise); outline-offset: 3px; }
.avap--auto { animation: balayer 9s var(--smooth) infinite; }
/* Le balayage traverse tout le cadre et s'arrête sur chaque version entière :
   entre 30 et 70 %, on ne voyait jamais le nouveau site au complet. */
@keyframes balayer { 0%, 14% { --pos: 100%; } 34%, 84% { --pos: 0%; } 100% { --pos: 100%; } }
/* Pendant les arrêts, la poignée et l'étiquette de la version cachée
   s'effacent. Retenue à 18 px du bord, la poignée laissait une ligne qui ne
   correspondait plus à la coupe, et « Avant » couvrait le logo du nouveau site.
   Même durée et même départ que balayer : les deux restent synchrones. */
.avap--auto .avap__poignee, .avap--auto .avap__pastille { animation: avap-poignee 9s linear infinite; }
.avap--auto .avap__etiq--g { animation: avap-avant 9s linear infinite; }
.avap--auto .avap__etiq--d { animation: avap-apres 9s linear infinite; }
@keyframes avap-poignee { 0%, 11% { opacity: 0; } 16%, 31% { opacity: 1; } 36%, 82% { opacity: 0; } 86%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes avap-avant { 0%, 16% { opacity: 1; } 28%, 88% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes avap-apres { 0%, 18% { opacity: 0; } 30%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
.avap__apres { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avap__avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.avap__avant img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avap__poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--turquoise); transform: translateX(-1px); pointer-events: none; }
/* La ligne suit la coupe jusqu'au bord ; la pastille, elle, est un élément à
   part retenu à 17 px des bords pour ne jamais être coupée en deux. */
.avap__pastille { position: absolute; top: 50%; left: clamp(17px, var(--pos), calc(100% - 17px)); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--turquoise); color: var(--sur-turquoise); transform: translate(-50%, -50%); font: 700 16px/1 var(--titre); pointer-events: none; }
.avap__etiq { position: absolute; top: 10px; padding: 5px 8px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font: 400 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; pointer-events: none; }
.avap__etiq--g { left: 10px; } .avap__etiq--d { right: 10px; }
.avap__glisse { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
/* Page Refonte : le même comparateur en grand, à la main. */
.comparaison { display: grid; gap: 18px; }
.avap--grand { border-radius: 14px; --pos: 50%; }
.avap--grand .avap__etiq { top: 16px; padding: 7px 10px; font-size: 11px; }
.avap--grand .avap__etiq--g { left: 16px; } .avap--grand .avap__etiq--d { right: 16px; }
.comparaison__legende { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font: 400 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muet); }
.comparaison__legende a { color: var(--texte); }

/* 3 · Bilingue : la phrase bascule entre les deux langues */
.langue { display: grid; gap: 20px; }
.langue__bascule { position: relative; display: inline-flex; gap: 16px; justify-self: start; padding-bottom: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; }
.langue__bascule i { position: absolute; left: 0; bottom: 0; width: 2ch; height: 2px; background: var(--sur-turquoise); animation: bascule 5s var(--smooth) infinite; }
@keyframes bascule { 0%, 45% { transform: none; } 50%, 95% { transform: translateX(calc(2ch + 16px)); } 100% { transform: none; } }
/* Deux lignes, taille lue sur la tuile (cqi) : sur une seule ligne, la phrase
   débordait la tuile étroite de 70 px. */
.tuile { container-type: inline-size; }
.langue__phrase { margin: 0; height: 2.1em; overflow: hidden; font: 800 min(68px, 11cqi)/1.05 var(--titre); font-stretch: 112%; letter-spacing: -.035em; }
.langue__piste { display: grid; animation: phrase 5s var(--smooth) infinite; }
.langue__piste > span { height: 2.1em; overflow: hidden; }
@keyframes phrase { 0%, 45% { transform: none; } 50%, 95% { transform: translateY(-50%); } 100% { transform: none; } }

/* 4 · Référencement local : la recherche, puis la fiche qui apparaît */
.recherche { display: grid; gap: 10px; }
.recherche__champ { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: #0f0f0f; border: 1px solid var(--trait); font: 400 13px/1 var(--mono); }
.recherche__loupe { position: relative; width: 11px; height: 11px; border: 2px solid var(--muet); border-radius: 50%; flex: none; }
.recherche__loupe::after { content: ""; position: absolute; right: -6px; bottom: -3px; width: 6px; height: 2px; background: var(--muet); transform: rotate(45deg); }
.recherche__texte { display: inline-block; overflow: hidden; white-space: nowrap; width: calc(var(--n, 19) * 1ch); animation: taper 8s steps(var(--n, 19)) infinite; }
@keyframes taper { 0% { width: 0; } 22%, 100% { width: calc(var(--n, 19) * 1ch); } }
.recherche__curseur { width: 1px; height: 15px; background: var(--turquoise); animation: clignote 1s infinite; }
@keyframes clignote { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.resultat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #141414; border: 1px solid var(--trait);
  animation: resultat 8s var(--sortie) infinite backwards; animation-delay: calc(var(--i, 0) * .15s); }
@keyframes resultat { 0%, 26% { opacity: 0; transform: translateY(10px); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.resultat__pin { width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #3a3a3a; }
.resultat--client { border-color: rgba(34, 184, 193, .55); background: rgba(34, 184, 193, .08); }
.resultat--client .resultat__pin { background: var(--turquoise); }
.resultat b { display: block; font: 700 15px/1.25 var(--titre); }
.resultat div { min-width: 0; }
.resultat div span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 10px/1.4 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .05em; }
.resultat div i { display: block; height: 8px; margin: 3px 0; border-radius: 4px; background: #262626; }
.resultat__lien { font: 400 10px/1 var(--mono); color: var(--turquoise); text-transform: uppercase; letter-spacing: .06em; }

/* 5 · Boutique et rendez-vous : deux vraies interfaces, avec de vrais mots.
   L'ancienne version (grille de carrés gris, fiche de 120 px) restait
   abstraite : on ne reconnaissait ni un agenda, ni une boutique.
   Tailles en em, et l'em suit la largeur de la démo (cqi) : les deux
   fenêtres grandissent ensemble sur un grand écran. */
.agenda { container-type: inline-size; }
.agenda__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: clamp(10px, 1.55cqi, 14px); }
@container (max-width: 540px) { .agenda__grille { grid-template-columns: minmax(0, 1fr); font-size: clamp(10px, 3.2cqi, 14px); } }
.fenetre { position: relative; display: flex; flex-direction: column; gap: .9em; padding: 1.2em; border-radius: 12px; background: #151515; border: 1px solid var(--trait); }
.fenetre__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fenetre__tete b { font: 700 1.15em/1.15 var(--titre); }
.fenetre__tete span { font: 400 .78em/1 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .06em; }
/* Le soin réservé : sans lui, l'agenda ne disait pas CE qu'on réserve, et la
   fenêtre gardait un trou au-dessus du bouton. */
.resa__soin { display: flex; justify-content: space-between; align-items: center; gap: .8em; padding: .75em .9em; border-radius: 8px; background: #1d1d1d; }
.resa__soin b { font: 600 .92em/1.2 var(--titre); }
.resa__soin span { font: 400 .68em/1 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.resa__jours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45em; }
.resa__jours span { display: grid; gap: .3em; justify-items: center; padding: .6em 0; border-radius: 8px; border: 1px solid var(--trait); font: 700 1.1em/1 var(--titre); }
.resa__jours small { font: 400 .62em/1 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .05em; }
.resa__heures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }
.resa__heures span { padding: .6em 0; text-align: center; border-radius: 999px; border: 1px solid var(--trait); font: 500 .92em/1 var(--titre); white-space: nowrap; }
.resa__heures .pris { color: #4d4d4b; text-decoration: line-through; border-style: dashed; }
.resa .est-choisi { background: var(--turquoise); border-color: var(--turquoise); color: var(--sur-turquoise); }
.resa .est-choisi small { color: inherit; opacity: .7; }
.resa__jours .est-choisi { animation: resa-jour 10s var(--sortie) infinite; }
.resa__heures .est-choisi { animation: resa-heure 10s var(--sortie) infinite; }
@keyframes resa-jour { 0%, 8% { background: transparent; border-color: var(--trait); color: var(--texte); } 12%, 94% { background: var(--turquoise); border-color: var(--turquoise); color: var(--sur-turquoise); } 100% { background: transparent; border-color: var(--trait); color: var(--texte); } }
@keyframes resa-heure { 0%, 20% { background: transparent; border-color: var(--trait); color: var(--texte); } 24%, 94% { background: var(--turquoise); border-color: var(--turquoise); color: var(--sur-turquoise); } 100% { background: transparent; border-color: var(--trait); color: var(--texte); } }
.fenetre__bouton { position: relative; margin-top: auto; height: 2.9em; border-radius: 8px; overflow: hidden; background: var(--texte); color: var(--fond);
  display: grid; place-items: center; font: 500 .8em/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
/* L'état de base est l'état final (« Confirmé ») : sans mouvement, c'est lui qu'on voit. */
.resa__bouton span { position: absolute; inset: 0; display: grid; place-items: center; }
.resa__bouton span:first-child { opacity: 0; animation: resa-avant 10s var(--sortie) infinite; }
.resa__bouton span:last-child { background: var(--turquoise); color: var(--sur-turquoise); animation: resa-apres 10s var(--sortie) infinite; }
@keyframes resa-avant { 0%, 30% { opacity: 1; } 34%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes resa-apres { 0%, 30% { transform: translateY(100%); } 34%, 94% { transform: none; } 100% { transform: translateY(100%); } }
/* La boutique : une grille de vrais produits (la gamme LPG vendue par
   Vibrance). La capture de la page d'accueil qu'on y montrait avant ne
   ressemblait à aucune boutique. Photos détourées sur fond blanc : on les
   pose sur un carton blanc, en contain, pour ne jamais couper le tube. */
.boutique__tete { align-items: center; }
.boutique__sac { position: relative; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; border: 1px solid var(--trait); color: var(--texte); }
.boutique__sac svg { width: 1.05em; height: 1.05em; }
.boutique__sac i { position: absolute; top: -.4em; right: -.4em; display: grid; place-items: center; min-width: 1.45em; height: 1.45em; border-radius: 999px;
  background: var(--turquoise); color: var(--sur-turquoise); font: 700 .72em/1 var(--mono); font-style: normal; animation: sac-compte 10s var(--sortie) infinite; }
.vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; }
.article { display: grid; gap: .4em; align-content: start; }
.article__img { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #fff; }
.article__img img { width: 100%; height: 100%; object-fit: contain; padding: .5em; }
.article b { font: 600 .84em/1.2 var(--titre); }
.article small { font: 400 .62em/1 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .05em; }
.article__ajout { margin-top: .15em; padding: .6em .3em; border-radius: 6px; border: 1px solid var(--trait); text-align: center; font: 500 .64em/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.article--choisi .article__ajout { background: var(--texte); color: var(--fond); border-color: var(--texte); animation: sac-presser 10s var(--sortie) infinite; }
.boutique__ajoute { display: flex; justify-content: space-between; align-items: center; gap: .8em; margin-top: auto; padding: .75em .9em; border-radius: 8px;
  background: var(--turquoise); color: var(--sur-turquoise); font: 500 .72em/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; animation: sac-ajoute 10s var(--sortie) infinite; }
.boutique__ajoute span:last-child { white-space: nowrap; }
@keyframes sac-presser { 0%, 48% { transform: none; } 51% { transform: scale(.94); } 55%, 100% { transform: none; } }
@keyframes sac-compte { 0%, 52% { transform: scale(0); } 56% { transform: scale(1.3); } 60%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sac-ajoute { 0%, 52% { opacity: 0; transform: translateY(8px); } 57%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(8px); } }

/* 6 · Hébergement et entretien : le tableau de bord, en vie */
.etat { display: grid; gap: 16px; }
.etat__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.etat__liste li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--trait); font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.etat__liste span { margin-left: auto; color: var(--turquoise); }
.etat__liste i { width: 7px; height: 7px; border-radius: 50%; background: var(--turquoise); animation: pouls 2.4s ease-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(34, 184, 193, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 184, 193, 0); } }
.battements { display: flex; align-items: end; gap: 3px; height: 40px; }
.battements b { flex: 1; height: var(--h, 70%); border-radius: 2px; background: rgba(34, 184, 193, .3); animation: battre 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes battre { 0%, 100% { background: rgba(34, 184, 193, .3); } 50% { background: var(--turquoise); } }

/* ---------- Studio : la section turquoise qui s'ouvre ---------- */
.studio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px);
  padding: clamp(90px, 12vw, 170px) var(--gout); background: var(--turquoise); color: var(--sur-turquoise);
  /* --p va de 0 à 1 à l'entrée de la section : la plaque arrondie s'élargit
     jusqu'au plein cadre. Sans JS, --p vaut 1 et la section est simplement pleine. */
  clip-path: inset(calc((1 - var(--p, 1)) * 5vw) calc((1 - var(--p, 1)) * 6vw) round calc((1 - var(--p, 1)) * 40px));
}
.studio .etiquette { color: rgba(11, 17, 18, .7); }
.studio__phrase { margin: 18px 0 0; font-size: clamp(28px, 3vw, 48px); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; max-width: 18ch; }
.personnes { border-top: 1px solid rgba(11, 17, 18, .25); align-self: end; }
.personne { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 24px; padding: 26px 0; border-bottom: 1px solid rgba(11, 17, 18, .25); }
.personne__nom { font: 800 30px/1 var(--titre); font-stretch: 115%; letter-spacing: -.03em; }
.personne__role { font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.personne p { grid-column: 1 / -1; margin: 0; color: rgba(11, 17, 18, .78); max-width: 46ch; font-size: 15px; }
/* minmax(0, 1fr) et non 1fr : une piste 1fr ne descend pas sous le contenu le
   plus large, et le nom complet d'Océane à 30 px élargissait toute la section
   à 340 px sur un écran de 320 (bord droit rogné). */
@media (max-width: 820px) { .studio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .personne { grid-template-columns: minmax(0, 1fr); } .personne__nom { font-size: 26px; } }

/* ---------- Appel ---------- */
.appel { padding: clamp(84px, 12vw, 168px) var(--gout) clamp(36px, 5vw, 64px); }
.appel__lien { display: block; text-decoration: none; }
.appel__lien .titre__ligne { transition: color .4s var(--ease); }
.appel__lien:hover .titre__ligne { color: var(--turquoise); }
.appel__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; margin-top: 40px; }
.appel__coord { display: flex; flex-wrap: wrap; gap: 12px 44px; font: 400 11px/1.4 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .07em; }
.appel__coord a { color: var(--texte); text-decoration: none; }
.pastille { display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%; background: var(--turquoise); color: var(--sur-turquoise);
  text-decoration: none; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; text-align: center; transition: transform .5s var(--sortie), background .3s; }
.pastille:hover { background: var(--texte); }

/* ---------- Apparition au défilement, partagée ----------
   Sous .js seulement : si le script ne part pas, le filet de 3 s retire .js
   et tout est visible. */
.js [data-apparait] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--sortie), transform .9s var(--sortie); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-apparait].est-vu { opacity: 1; transform: none; }
.js [data-boucle]:not(.est-active) * { animation-play-state: paused !important; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.section { padding: clamp(84px, 11vw, 150px) var(--gout); }
.section__tete { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 60px); }
.section__intro { margin: 0; max-width: 40ch; color: var(--muet); font-size: 15px; }

/* ---------- Pourquoi sur mesure : la comparaison ----------
   Un vrai tableau : c'est une comparaison ligne à ligne, et un lecteur
   d'écran doit pouvoir la lire comme telle. Sous 760 px, chaque ligne
   devient une carte ; data-col rappelle la colonne. */
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: clamp(18px, 2vw, 26px) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--trait); }
.compare thead th { padding-top: 0; border-top: 0; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muet); }
.compare thead th.compare__nous { color: var(--turquoise); }
.compare tbody th { width: 22%; padding-right: 24px; font: 800 clamp(20px, 1.8vw, 28px)/1.05 var(--titre); font-stretch: 112%; letter-spacing: -.03em; text-transform: uppercase; }
.compare td { width: 39%; padding-right: 32px; font-size: 16px; line-height: 1.5; }
.compare td.compare__eux { color: var(--muet); }
/* Le site loué se raye, le nôtre s'allume : la comparaison se joue au lieu
   de se lire. Le trait est un fond de 1 px dont la largeur passe de 0 à 100 % ;
   sur un élément en ligne, il traverse les lignes l'une après l'autre, comme
   un trait de crayon. */
.compare__texte { background: linear-gradient(currentColor, currentColor) no-repeat 0 60% / 0 1px; transition: background-size 1s var(--sortie), color .8s; transition-delay: calc(var(--i, 0) * 110ms + 450ms); }
.compare tr.est-vu .compare__texte { background-size: 100% 1px; color: rgba(142, 141, 136, .6); }
/* Le point seulement au-delà de 760 px : sous ce seuil, ::before devient
   l'étiquette « UN SITE CBURNETTWEB », et l'animation la grossissait de 35 %
   avec un anneau autour du texte, qui débordait de la cellule. */
@media (min-width: 761px) {
  .js .compare tr[data-apparait] td.compare__nous::before { transform: scale(0); }
  .compare tr.est-vu td.compare__nous::before { animation: point-allume 1s var(--sortie) both; animation-delay: calc(var(--i, 0) * 110ms + 750ms); }
}
@keyframes point-allume {
  0% { transform: scale(0); box-shadow: 0 0 0 0 rgba(34, 184, 193, .5); }
  55% { transform: scale(1.35); box-shadow: 0 0 0 7px rgba(34, 184, 193, .18); }
  100% { transform: scale(1); box-shadow: 0 0 0 13px rgba(34, 184, 193, 0); }
}
.compare td.compare__nous { position: relative; padding-left: 26px; }
.compare td.compare__nous::before { content: ""; position: absolute; left: 0; top: calc(clamp(18px, 2vw, 26px) + .55em); width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); }
@media (max-width: 760px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding: 22px 0; border-top: 1px solid var(--trait); }
  .compare th, .compare td { border: 0; padding: 0; }
  .compare td { margin-top: 12px; padding-right: 0; }
  .compare td.compare__eux::before { content: attr(data-col); display: block; margin-bottom: 4px; font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
  .compare td.compare__nous { padding-left: 0; }
  .compare td.compare__nous::before { content: attr(data-col); position: static; display: block; width: auto; height: auto; margin-bottom: 4px; border-radius: 0; background: none; color: var(--turquoise); font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
}

/* ---------- Le déroulement ----------
   Une vraie suite ordonnée : les numéros disent l'ordre, pas la déco. Le
   filet turquoise se trace à l'apparition de chaque étape. */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 3vw, 44px); }
.etape { position: relative; padding-top: 22px; border-top: 1px solid var(--trait); }
.etape::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--turquoise); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--sortie); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.etape.est-vu::before, html:not(.js) .etape::before { transform: scaleX(1); }
/* Le déroulement suit le défilement : main.js pose --avance (0 à 1) sur la
   liste, et chaque étape s'allume à son tour, le trait turquoise courant de la
   première à la sixième. Sans script ou sans mouvement, --avance vaut 1 : tout
   est allumé. */
.js .etapes[data-avance] .etape { --allume: clamp(0, calc(var(--avance, 1) * 6 - var(--i, 0)), 1); }
.js .etapes[data-avance] .etape::before { top: -2px; height: 3px; border-radius: 2px; transition: none; transform: scaleX(var(--allume)); box-shadow: 0 0 14px rgba(34, 184, 193, calc(.55 * var(--allume))); }
.js .etapes[data-avance] .etape h3 { opacity: calc(.38 + .62 * var(--allume)); }
.js .etapes[data-avance] .etape p { opacity: calc(.5 + .5 * var(--allume)); }
.js .etapes[data-avance] .etape__num { color: color-mix(in srgb, var(--turquoise) calc(var(--allume) * 100%), var(--muet)); }
.etape__num { font: 400 11px/1 var(--mono); color: var(--turquoise); letter-spacing: .08em; }
.etape h3 { margin: 16px 0 10px; font: 800 clamp(20px, 1.7vw, 26px)/1.05 var(--titre); font-stretch: 112%; letter-spacing: -.03em; }
.etape p { margin: 0; color: var(--muet); font-size: 15px; max-width: 36ch; }
@media (max-width: 900px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .etapes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Diagnostic gratuit ---------- */
.diagnostic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.diagnostic__texte { margin: 22px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; max-width: 40ch; }
.diagnostic__liste { list-style: none; margin: 26px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muet); }
.diagnostic__liste li { display: flex; gap: 10px; align-items: baseline; }
.diagnostic__liste li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--turquoise); transform: translateY(-1px); }
.diagnostic__note { margin: 18px 0 0; color: var(--muet); font-size: 14px; }
.rapport { position: relative; overflow: hidden; padding: clamp(20px, 2.4vw, 30px); border-radius: 14px; background: var(--fond-2); border: 1px solid var(--trait); box-shadow: 0 60px 100px -60px rgba(0, 0, 0, .9); }
.rapport__tete { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--trait); font: 400 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muet); }
.rapport__tete b { color: var(--texte); font-weight: 500; }
.rapport__lignes { list-style: none; margin: 0; padding: 0; }
.rapport__ligne { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--trait); font-size: 15px; }
.puce { flex: none; padding: 6px 10px; border-radius: 999px; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  animation: puce 8s var(--sortie) infinite backwards; animation-delay: calc(var(--i, 0) * .45s + .6s); }
/* Couleurs d'état, distinctes de l'accent : ambre = à revoir, turquoise = correct. */
.puce--revoir { background: rgba(227, 168, 87, .14); color: #E3A857; }
.puce--ok { background: rgba(34, 184, 193, .14); color: var(--turquoise); }
@keyframes puce { 0% { opacity: 0; transform: scale(.85); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.rapport__conclusion { margin: 18px 0 0; font-size: 14px; color: var(--muet); }
.rapport__conclusion b { color: var(--texte); font-weight: 600; }
.rapport__scan { position: absolute; left: 0; right: 0; height: 70px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(34, 184, 193, .10) 85%, rgba(34, 184, 193, .7)); animation: scan 8s linear infinite; }
@keyframes scan { 0% { top: -70px; opacity: 1; } 40% { top: 100%; opacity: 1; } 41%, 100% { top: 100%; opacity: 0; } }
@media (max-width: 900px) { .diagnostic { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .diagnostic__liste { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ----------
   <details> natif : s'ouvre au clavier et sans JS. L'ouverture s'anime là
   où le navigateur sait interpoler vers « auto », et s'ouvre net ailleurs. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__cote { position: sticky; top: 110px; }
/* La colonne de la FAQ fait 40 % : au titre général de 5vw, « honnêtement. »
   (Réalisations) débordait de sa colonne entre 1024 et 1440 px. */
.faq__cote .h2 { font-size: clamp(34px, 4vw, 64px); }
.faq__cote p { margin: 22px 0 0; color: var(--muet); font-size: 15px; }
.faq__cote a { color: var(--turquoise); text-decoration: none; }
/* overflow-anchor: none : quand une réponse s'ouvre, le navigateur ne doit
   pas « corriger » le défilement pour garder un repère ailleurs à l'écran. */
.questions { border-top: 1px solid var(--trait); overflow-anchor: none; }
.question { border-bottom: 1px solid var(--trait); }
.question summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.question summary::-webkit-details-marker { display: none; }
.question h3 { margin: 0; font: 700 clamp(18px, 1.5vw, 22px)/1.25 var(--titre); letter-spacing: -.015em; }
.question__signe { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--trait); border-radius: 50%; transition: background .3s, border-color .3s, transform .45s var(--sortie); }
.question__signe::before, .question__signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.question__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.question[open] .question__signe { transform: rotate(45deg); background: var(--turquoise); border-color: var(--turquoise); color: var(--sur-turquoise); }
@media (hover: hover) and (pointer: fine) { .question summary:hover .question__signe { border-color: var(--texte); } }
/* La réponse s'ouvre d'un coup, puis apparaît en fondu. La hauteur animée
   (première version) faisait se fermer une question pendant qu'une autre
   s'ouvrait : la page rétrécissait puis grandissait en une demi-seconde,
   le titre collant tressautait, et près du bas de page le navigateur
   remontait l'appel « Parlons-en » à l'écran le temps de quelques images. */
.question[open] .question__reponse { animation: reponse .35s var(--sortie) both; }
@keyframes reponse { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.question__reponse { margin: 0; padding: 0 58px 26px 0; color: var(--muet); font-size: 16px; max-width: 62ch; }
@media (max-width: 900px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__cote { position: static; } .question__reponse { padding-right: 0; } }

/* ---------- Pied de page ----------
   Un vrai pied : coordonnées, plan du site, territoire avec les pages
   locales, et le nom en grand pour signer. Adresses identiques au site
   actuel : aucun lien ne change. */
/* Écrans flottants (voir front-page.php). Sombres et désaturés : on doit
   sentir le travail derrière le texte, pas le lire. */
.flotte { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; perspective: 1400px; opacity: 0; transition: opacity .9s; }
.flotte.est-visible { opacity: 1; }
.flotte__scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .8s var(--sortie); }
.flotte__ecran {
  position: absolute; left: var(--x); top: var(--y); width: var(--l); aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  transform: translate3d(0, calc(var(--p, 0) * var(--v) * -1px), var(--z)) rotateY(var(--ay)) rotateX(var(--ax)) rotateZ(var(--az));
  box-shadow: 0 0 0 1px rgba(34, 184, 193, .3), 0 0 70px -12px rgba(34, 184, 193, .25), 0 50px 90px -30px rgba(0, 0, 0, .95);
  backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(var(--m), #000 25%, transparent 78%); mask-image: linear-gradient(var(--m), #000 25%, transparent 78%);
}
.flotte__ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Assombri par un voile, pas par filter: brightness()/blur() : dans une scène
   3D, un filtre fait redessiner l'image à basse définition par Chrome, et les
   écrans sortaient flous et baveux. Le voile garde l'image nette dessous. */
.flotte__ecran::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(34, 184, 193, .14), rgba(14, 14, 14, .55) 45%, rgba(14, 14, 14, .72)); }
@media (max-width: 900px) { .flotte { display: none; } }
.pied { padding: clamp(56px, 7vw, 96px) var(--gout) 26px; border-top: 1px solid var(--trait); }
/* La bulle de l'assistant est fixée en bas à droite : tout en bas de page, elle
   couvrait le lien « Confidentialité » de la ligne légale. On relève la ligne
   de la hauteur de la bulle (≈ 38 px) plus sa marge, seulement quand elle existe. */
body:has(.assistant) .pied { padding-bottom: calc(clamp(14px, 2vw, 24px) + 38px + 26px); }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 64px); }
.pied__resume { margin: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; letter-spacing: -.012em; max-width: 26ch; }
.pied__partenaire { margin: 18px 0 0; color: var(--muet); font-size: 14px; max-width: 38ch; }
.pied__partenaire a { color: var(--texte); }
.pied__col { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.pied__col a { text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.pied__col a:hover { background-size: 100% 1px; }
.pied__col span { color: var(--muet); }
.pied__titre { margin: 0 0 6px; font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muet); }
.pied__geant { margin: clamp(48px, 7vw, 96px) 0 0; color: var(--texte); }
.pied__web { color: var(--turquoise); }
.pied__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--trait);
  font: 400 10px/1.4 var(--mono); color: var(--muet); text-transform: uppercase; letter-spacing: .07em; }
.pied__legal nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.pied__legal a { text-decoration: none; }
.pied__legal a:hover { color: var(--texte); }
@media (max-width: 900px) { .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__col--marque { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied__haut { grid-template-columns: minmax(0, 1fr); } }


/* ==================================================================
   Pièces du vrai site (hors maquette)
   ================================================================== */

/* ---------- Menu : liste WordPress, sélecteur de langue, mobile ---------- */
.nav__liste { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav__liste a { position: relative; padding: 6px 0; }
.nav__liste a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__liste a:hover::after, .nav__liste .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.nav__liste .current-menu-item > a { color: var(--turquoise); }
.nav__mobile { display: none; }
.tete__droite { display: flex; align-items: center; gap: 22px; }
.tete__tel { font-variant-numeric: tabular-nums; }
/* Rien ne se coupe dans l'en-tête : à 1080 px, le numéro et le bouton
   passaient sur deux lignes et la barre doublait de hauteur. */
.tete a, .tete__cta, .tete__tel { white-space: nowrap; }
/* Entre la tablette et le grand écran, le bouton cède sa place au téléphone :
   le bouton est déjà dans le héros et dans le pied, le numéro nulle part
   ailleurs en haut de page. */
@media (min-width: 901px) and (max-width: 1240px) { .tete__cta { display: none; } .nav__liste { gap: 22px; } }
.tete__cta { padding: 11px 15px; border: 1px solid var(--trait); border-radius: 999px; transition: border-color .3s, background .3s, color .3s; }
.tete__cta:hover { background: var(--turquoise); border-color: var(--turquoise); color: var(--sur-turquoise); }
.langues { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--trait); border-radius: 999px; background: rgba(14, 14, 14, .6); }
/* Le fond sombre : en haut de l'accueil, l'en-tête est transparent sur le mur de
   captures, et « EN » en gris se perdait sur une capture claire. */
.langues__lien { color: #c9c8c2; }
.langues__actif, .langues__lien { display: grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: .06em; }
.langues__actif { background: var(--texte); color: var(--fond); }
.langues__lien { color: var(--muet); transition: color .3s; }
.langues__lien:hover { color: var(--texte); }
.tete__burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.tete__burger-ligne, .tete__burger-ligne::before { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform .35s var(--sortie), top .35s var(--sortie); }
.tete__burger-ligne { top: 18px; }
.tete__burger-ligne::before { content: ""; left: 0; right: 0; top: 7px; }
.tete__burger[aria-expanded="true"] .tete__burger-ligne { top: 21px; transform: rotate(45deg); }
.tete__burger[aria-expanded="true"] .tete__burger-ligne::before { top: 0; transform: rotate(-90deg); }

/* Sous 900 px, le menu devient un panneau plein écran. Le téléphone reste
   dans l'en-tête ; le bouton « Démarrer un projet » passe dans le panneau. */
@media (max-width: 900px) {
	.tete { padding-block: 12px; }
	.tete.est-defile { padding-block: 8px; }
	.tete__burger { display: block; }
	.tete__cta { display: none; }
	.nav {
		position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: 40px;
		padding: 100px var(--gout) 40px; background: var(--fond);
		opacity: 0; visibility: hidden; transform: translateY(-12px);
		transition: opacity .35s var(--sortie), transform .45s var(--sortie), visibility 0s .45s;
	}
	.nav.est-ouvert { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--sortie), transform .45s var(--sortie), visibility 0s; }
	.nav__liste { flex-direction: column; gap: 6px; }
	/* 9,6vw et non 11vw avec 40 px au minimum : à 320-414 px, « Réalisations »
	   mesurait 347 px et sortait du panneau par la droite. */
	.nav__liste a { display: inline-block; font: 800 clamp(28px, 9.6vw, 64px)/1.05 var(--titre); font-stretch: 118%; letter-spacing: -.035em; text-transform: uppercase; }
	.nav__liste a::after { display: none; }
	.nav__mobile { display: grid; gap: 16px; justify-items: start; }
	.nav__tel { font: 500 16px/1 var(--mono); }
	/* Le verrou sur <html> seul ne tient pas partout (Safari sur iPhone) : la page
	   défilait sous le menu ouvert. body aussi, et le panneau garde ses défilements. */
	.menu-ouvert, .menu-ouvert body { overflow: hidden; }
	.nav { overscroll-behavior: contain; overflow-y: auto; }
	/* backdrop-filter fait de l'en-tête le bloc conteneur de ses descendants
	   « fixed » : le panneau se serait ouvert dans la barre de 70 px au lieu de
	   couvrir l'écran. On retire le flou le temps que le menu est ouvert. */
	.menu-ouvert .tete { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border-bottom-color: transparent; }
}
@media (max-width: 560px) { .tete__tel { display: none; } .marque { font-size: 18px; } .tete__droite { gap: 12px; } }

/* ---------- Sections génériques ---------- */
.section--serree { padding-top: 0; }
.services__suite { margin: clamp(28px, 4vw, 44px) 0 0; display: flex; justify-content: center; }
.studio__lien { margin: 26px 0 0; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.studio__lien a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* ---------- Haut des pages intérieures ---------- */
.bandeau { padding: clamp(130px, 16vw, 210px) var(--gout) clamp(56px, 7vw, 100px); border-bottom: 1px solid var(--trait); }
.bandeau--court { padding-bottom: clamp(36px, 5vw, 60px); }
.bandeau__titre { margin: 20px 0 0; font: 800 clamp(40px, 7.4vw, 118px)/.92 var(--titre); font-stretch: 118%; letter-spacing: -.04em; max-width: 16ch; text-wrap: balance; }
.bandeau__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px 64px; margin-top: clamp(28px, 4vw, 52px); }
.bandeau__intro { margin: 0; max-width: 46ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: #cfcec8; }
.bandeau__intro p { margin: 0 0 12px; }
.bandeau__intro p:last-child { margin-bottom: 0; }

/* ---------- Services : les six prestations ---------- */
.prestations { padding-top: clamp(56px, 7vw, 96px); }
.prestations__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.prestation { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 32px); background: var(--fond-2); border: 1px solid var(--trait); border-radius: 14px; }
.prestation__titre { margin: 0; font: 800 clamp(22px, 2vw, 30px)/1 var(--titre); font-stretch: 115%; letter-spacing: -.03em; text-transform: uppercase; }
.prestation__texte { margin: 0; color: var(--muet); font-size: 15px; }
.prestation__points, .liste-points { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--trait); display: grid; gap: 8px; font: 400 11px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.prestation__points li, .liste-points li { display: flex; gap: 10px; }
.prestation__points li::before, .liste-points li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: var(--turquoise); }
.prestation__lien { margin-top: auto; padding-top: 6px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--turquoise); text-decoration: none; }
@media (max-width: 1000px) { .prestations__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prestations__liste { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Le socle ---------- */
.socle__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--trait); }
.socle__liste li { position: relative; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--trait); font-size: 16px; line-height: 1.35; }
.socle__liste li::before { content: ""; display: block; width: 18px; height: 2px; margin-bottom: 14px; background: var(--turquoise); }
@media (max-width: 1000px) { .socle__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .socle__liste { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Deux colonnes : titre à gauche, texte à droite ---------- */
.photos__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.photos__texte { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 52ch; }
.photos__texte p { margin: 0 0 18px; }
.photos__partenaire, .partenaire__texte { color: var(--muet); font-size: 15px; }
.photos__partenaire a, .partenaire__texte a { color: var(--texte); }
@media (max-width: 860px) { .photos__grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Réalisations, page complète ---------- */
.galerie--page { align-items: start; row-gap: clamp(56px, 7vw, 110px); }
.carte--demi { grid-column: span 6; }
/* La colonne de droite descend d'un cran : un rythme de magazine plutôt
   qu'une grille de tableur. */
.carte--decalee { margin-top: clamp(0px, 9vw, 150px); }
.carte__texte { display: block; margin-top: 14px; color: var(--muet); font-size: 15px; line-height: 1.55; max-width: 56ch; }
.carte__lien { display: inline-block; margin-top: 14px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--turquoise); }
.carte__cadre, .carte__meta { display: block; }
.carte__meta { display: flex; }
@media (max-width: 900px) { .carte--demi { grid-column: span 1; } .carte--decalee { margin-top: 0; } }
@media (max-width: 600px) { .carte--demi { grid-column: auto; } }
.galerie--ville { margin-top: 26px; }

/* ---------- Le studio ---------- */
.chiffres { list-style: none; margin: 0; padding: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.chiffres li { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--trait); }
.chiffres__nombre { font: 800 clamp(34px, 3.6vw, 60px)/.9 var(--titre); white-space: nowrap; font-stretch: 118%; letter-spacing: -.04em; color: var(--turquoise); }
.chiffres__texte { font: 400 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muet); max-width: 22ch; }
@media (max-width: 760px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; } }
/* À 320 px, « 30 jours » ne tenait pas sur une ligne dans sa demi-colonne. */
@media (max-width: 420px) { .chiffres__nombre { white-space: normal; font-size: 30px; } }
.studio--page .studio__phrase { font-weight: 800; }
.personne__taches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.personne__taches li { padding: 6px 10px; border: 1px solid rgba(11, 17, 18, .3); border-radius: 999px; font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.edito { max-width: 1200px; }
.edito .etiquette { margin-bottom: 22px; }
.edito__grand { margin: 0; font: 600 clamp(26px, 3vw, 46px)/1.14 var(--titre); letter-spacing: -.03em; max-width: 30ch; }
/* Le récit d'une page locale est un paragraphe entier : en taille de
   manchette, il occupait tout l'écran. */
.edito__grand--recit { font-size: clamp(21px, 2vw, 30px); line-height: 1.3; max-width: 44ch; }
.edito__suite { margin: 26px 0 0; color: var(--muet); font-size: clamp(17px, 1.4vw, 20px); max-width: 56ch; }
.regles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: regle; }
.regle { position: relative; padding: clamp(22px, 2.4vw, 32px); padding-left: clamp(64px, 6vw, 88px); background: var(--fond-2); border: 1px solid var(--trait); border-radius: 14px; counter-increment: regle; }
.regle::before { content: counter(regle, decimal-leading-zero); position: absolute; left: clamp(22px, 2.4vw, 32px); top: clamp(26px, 2.6vw, 36px); font: 400 11px/1 var(--mono); color: var(--turquoise); }
.regle h3 { margin: 0 0 10px; font: 800 clamp(20px, 1.8vw, 26px)/1.05 var(--titre); font-stretch: 112%; letter-spacing: -.03em; }
.regle p { margin: 0; color: var(--muet); font-size: 15px; }
@media (max-width: 760px) { .regles { grid-template-columns: minmax(0, 1fr); } }
.partenaire__carte { padding: clamp(28px, 4vw, 56px); border: 1px solid var(--turquoise); border-radius: 18px; background: linear-gradient(135deg, rgba(34, 184, 193, .12), rgba(34, 184, 193, 0) 60%); }
.partenaire__texte { margin: 22px 0 0; max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); }
/* Le logo du partenaire à gauche, comme en v1 : sans lui, la carte se lisait
   comme un paragraphe de plus, et le nom BrandNous ne s'y voyait pas. */
.partenaire__carte { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.partenaire__logo img { display: block; width: 100%; height: auto; opacity: .9; transition: opacity .3s; }
.partenaire__logo:hover img { opacity: 1; }
.partenaire__titre { margin: 12px 0 0; }
@media (max-width: 640px) { .partenaire__carte { grid-template-columns: minmax(0, 1fr); } .partenaire__logo { max-width: 150px; } }

/* Territoire (accueil) : les pages locales en grand, une par ligne. */
.territoire__villes { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--trait); }
.territoire__villes li { border-bottom: 1px solid var(--trait); }
.territoire__villes a { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(14px, 1.6vw, 22px) 0; color: var(--texte); text-decoration: none; }
.territoire__nom { font: 800 clamp(34px, 5.4vw, 84px)/1 var(--titre); font-stretch: 115%; letter-spacing: -.04em; text-transform: uppercase; transition: color .3s, transform .5s var(--sortie); }
.territoire__fleche { font-size: clamp(22px, 3vw, 40px); color: var(--muet); transition: color .3s, transform .5s var(--sortie); }
@media (hover: hover) and (pointer: fine) {
  .territoire__villes a:hover .territoire__nom { color: var(--turquoise); transform: translateX(14px); }
  .territoire__villes a:hover .territoire__fleche { color: var(--turquoise); transform: translate(4px, -4px); }
}
.territoire__villes a:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; }
.territoire__ailleurs { margin: 22px 0 clamp(48px, 6vw, 80px); font: 400 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muet); }

/* ---------- Tarifs ---------- */
.facteurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--trait); }
.facteur { padding: 24px 24px 24px 0; border-right: 1px solid var(--trait); }
.facteur:last-child { border-right: 0; }
.facteur + .facteur { padding-left: 24px; }
.facteur h3 { margin: 0 0 12px; font: 800 clamp(18px, 1.5vw, 22px)/1.1 var(--titre); font-stretch: 112%; letter-spacing: -.02em; }
.facteur p { margin: 0; color: var(--muet); font-size: 15px; }
@media (max-width: 1100px) {
	.facteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facteur, .facteur + .facteur { padding: 22px 22px 22px 0; border-right: 0; border-bottom: 1px solid var(--trait); }
}
@media (max-width: 560px) { .facteurs { grid-template-columns: minmax(0, 1fr); } }
.etapes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .etapes--trois { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Refonte et pages locales : pastilles ---------- */
.signes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.signes li { padding: 12px 18px; border: 1px solid var(--trait); border-radius: 999px; font-size: 16px; }
.signes--liens li { padding: 0; }
.signes--liens a { display: block; padding: 12px 18px; text-decoration: none; transition: background .3s, color .3s; border-radius: 999px; }
.signes--liens a:hover { background: var(--turquoise); color: var(--sur-turquoise); }
.section--serree .etiquette + .signes { margin-top: 20px; }
.erreur__tel { margin: 32px 0 0; color: var(--muet); }
.erreur__tel a { color: var(--texte); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; padding-top: clamp(48px, 6vw, 80px); }
.formulaire { display: grid; gap: 22px; }
.formulaire__types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.formulaire__types legend { width: 100%; margin-bottom: 12px; }
.puce-choix { position: relative; cursor: pointer; }
.puce-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-choix span { display: block; padding: 12px 16px; border: 1px solid var(--trait); border-radius: 999px; font-size: 15px; transition: background .25s, color .25s, border-color .25s; }
.puce-choix input:checked + span { background: var(--turquoise); border-color: var(--turquoise); color: var(--sur-turquoise); }
.puce-choix input:focus-visible + span { outline: 2px solid var(--turquoise); outline-offset: 3px; }
.formulaire__rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.champ { display: grid; gap: 10px; }
.formulaire__etiquette { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muet); }
.formulaire__etiquette em { font-style: normal; opacity: .7; }
.champ input, .champ textarea {
	width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: transparent;
	color: var(--texte); font: 400 18px/1.4 var(--titre); transition: border-color .3s;
}
.champ textarea { resize: vertical; min-height: 140px; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 10px; font-size: 16px; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--turquoise); }
.champ input:focus-visible, .champ textarea:focus-visible { box-shadow: 0 2px 0 0 var(--turquoise); }
.champ ::placeholder { color: #5e5d59; }
.formulaire__miel { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formulaire__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.formulaire__bas .bouton { cursor: pointer; }
.formulaire__bas .bouton:disabled { opacity: .5; cursor: wait; }
.formulaire__note { margin: 0; max-width: 44ch; color: var(--muet); font-size: 13px; }
.formulaire__note a { color: var(--texte); }
.formulaire__etat { margin: 0; min-height: 1.4em; font-size: 16px; color: var(--turquoise); }
.contact__cote { display: grid; gap: 40px; position: sticky; top: 110px; }
.contact__bloc .etiquette { margin-bottom: 18px; }
.contact__suite { list-style: none; margin: 0; padding: 0; counter-reset: suite; display: grid; gap: 16px; }
.contact__suite li { position: relative; padding-left: 40px; counter-increment: suite; color: #cfcec8; font-size: 15px; }
.contact__suite li::before { content: counter(suite, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 400 11px/1.4 var(--mono); color: var(--turquoise); }
.contact__direct { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; margin: 0; }
.contact__direct dt { font: 400 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muet); }
.contact__direct dd { margin: 0; }
.contact__direct a { text-decoration: none; border-bottom: 1px solid var(--trait); }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } .contact__cote { position: static; } }
@media (max-width: 560px) { .formulaire__rangee { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Texte courant : politique, pages créées par le client ---------- */
.contenu { max-width: 760px; font-size: 17px; line-height: 1.7; }
.contenu h2 { margin: 2em 0 .6em; font: 800 clamp(22px, 2vw, 28px)/1.15 var(--titre); letter-spacing: -.02em; }
.contenu p, .contenu ul, .contenu ol { margin: 0 0 1em; color: #d6d5cf; }
.contenu a { color: var(--turquoise); }
.legal__maj { font: 400 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muet) !important; }
.contenu-libre { padding-top: 0; }

/* ---------- Bouton « Gérer mes témoins » dans le pied ---------- */
.pied__temoins { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.pied__temoins:hover { color: var(--texte); }

/* ---------- Réalisations : chaque site sur ses trois écrans ----------
   Un portable, une tablette, un téléphone, dessinés en CSS : aucun fichier
   d'appareil à télécharger, et les cadres suivent la palette du site. Le
   téléphone fait défiler la page mobile ENTIÈRE dans son écran, par
   background-position (0 % en haut, 100 % en bas) : pas besoin de connaître
   la hauteur de chaque capture pour qu'elle défile jusqu'au bout. */
.index-cas { display: flex; flex-wrap: wrap; gap: 8px; padding: clamp(28px, 4vw, 44px) var(--gout) 0; }
.index-cas a { padding: 10px 16px; border: 1px solid var(--trait); border-radius: 999px; font-size: 14px; text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
@media (hover: hover) and (pointer: fine) { .index-cas a:hover { background: var(--turquoise); border-color: var(--turquoise); color: var(--sur-turquoise); } }
.cas-liste { display: grid; gap: clamp(100px, 13vw, 190px); padding-top: clamp(56px, 7vw, 100px); }
.cas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; scroll-margin-top: 110px; }
.cas--inverse .appareils { order: 2; }
.appareils { position: relative; aspect-ratio: 16 / 11.5; }
.portable, .tablette, .telephone { position: absolute; will-change: transform; }
.portable { left: 3%; top: 0; width: 80%; }
.portable__ecran { padding: 1.4% 1.4% 2%; background: #0a0a0a; border: 1px solid #2d2d2d; border-radius: 14px 14px 3px 3px; box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); }
.portable__ecran img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 3px; }
.portable__base { position: relative; height: clamp(9px, 1vw, 14px); margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#3b3b3b, #1b1b1b 70%); }
.portable__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 45%; border-radius: 0 0 8px 8px; background: #151515; transform: translateX(-50%); }
/* Tablette et téléphone : proportions d'un iPad Pro et d'un iPhone 17.
   Bordures fines, grands coins arrondis, cadre métallique : tout est en
   unités de conteneur (cqi), donc proportionnel à la taille de l'appareil.
   La première version avait des bordures de 7 px fixes : sur un téléphone
   de 200 px, on aurait dit un modèle de 2015. */
/* Le cadre est une couche INTÉRIEURE : les unités cqi d'un élément se mesurent
   sur son conteneur parent, pas sur lui-même. .tablette et .telephone sont
   les conteneurs ; leur cadre et leur écran se dimensionnent sur eux. */
.tablette { right: 0; bottom: 5%; width: 27%; container-type: inline-size; }
.tablette__cadre { padding: .7cqi; border-radius: 7.6cqi; background: linear-gradient(145deg, #8b8e93, #3b3d41 38%, #6e7176 68%, #2f3134); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95); }
.tablette__ecran { overflow: hidden; border: 3.2cqi solid #050505; border-radius: 7cqi; background: #050505; }
.tablette__ecran img { width: 100%; aspect-ratio: 834 / 1194; object-fit: cover; object-position: top; border-radius: 3.4cqi; }
.telephone { left: 0; bottom: 0; width: 16.5%; container-type: inline-size; }
.telephone__cadre { position: relative; padding: 1.1cqi; border-radius: 17cqi; background: linear-gradient(145deg, #9a9da2, #3a3c40 35%, #72757a 65%, #2c2e31); box-shadow: 0 40px 70px -25px rgba(0, 0, 0, .95); }
/* Les boutons : volume à gauche, alimentation à droite, dans la teinte du cadre. */
.telephone__cadre::before, .telephone__cadre::after { content: ""; position: absolute; width: 1.4cqi; border-radius: 1cqi; background: #5d6065; }
.telephone__cadre::before { left: -1cqi; top: 22%; height: 11cqi; box-shadow: 0 16cqi 0 #5d6065; }
.telephone__cadre::after { right: -1cqi; top: 28%; height: 20cqi; }
.telephone__ecran { position: relative; aspect-ratio: 393 / 852; overflow: hidden; border: 2.4cqi solid #050505; border-radius: 15.6cqi; background: #111; }
/* La Dynamic Island : 126 x 37 points sur un écran de 393, à 11 points du haut. */
.telephone__ecran::before { content: ""; position: absolute; z-index: 2; top: 2.6cqi; left: 50%; width: 32%; aspect-ratio: 126 / 37; border-radius: 999px; background: #050505; transform: translateX(-50%); }
/* Le défilement part tout de suite, à vitesse régulière, et ne marque une
   pause qu'en bas de page. La première version attendait deux secondes puis
   accélérait lentement : on croyait que rien ne bougeait. */
.telephone__page { position: absolute; inset: 0; background: #1a1a1a no-repeat 50% 0 / 100% auto; animation: page-mobile 22s linear infinite alternate; }
.telephone__page--fixe { animation: none; }
/* Téléphone pris en main : le défilement vient de la main (main.js). Le
   geste tactile lui appartient, sinon glisser le doigt ferait défiler la page. */
.telephone[data-defiler] { user-select: none; -webkit-user-select: none; }
.telephone[data-defiler] .telephone__cadre { outline: 2px solid transparent; outline-offset: 5px; transition: outline-color .2s ease-out; }
.telephone.est-manuel { touch-action: none; }
.telephone.est-manuel .telephone__cadre, .telephone[data-defiler]:focus-visible .telephone__cadre { outline-color: var(--turquoise); }
.telephone[data-defiler]:focus-visible { outline: none; }
.telephone.est-manuel .telephone__page { animation: none; }
@keyframes page-mobile { 0% { background-position: 50% 0%; } 88%, 100% { background-position: 50% 100%; } }
.cas__texte { display: grid; justify-items: start; align-content: center; }
.cas__rang { margin: 0 0 18px; font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--turquoise); }
.cas__nom { margin: 0; font: 800 clamp(34px, 4vw, 62px)/.95 var(--titre); font-stretch: 116%; letter-spacing: -.035em; text-wrap: balance; }
.cas__infos { margin: 16px 0 0; font: 400 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muet); }
.cas__bientot { display: inline-block; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #cfcec8; }
.cas__desc { margin: 22px 0 28px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: #cfcec8; }
@media (max-width: 900px) {
	.cas { grid-template-columns: minmax(0, 1fr); }
	.cas--inverse .appareils { order: 0; }
	.cas-liste { gap: 96px; }
}

/* ---------- L'assistant (site/assistant.php) ----------
   Une bulle en bas à droite, un panneau qui s'ouvre au-dessus d'elle. Sur
   téléphone, le panneau prend tout l'écran : un clavier virtuel plus un
   panneau flottant de 600 px ne laissaient plus rien de lisible. */
.assistant { position: fixed; right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); z-index: 90; font-size: 15px; }
.assistant__bulle {
	display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--turquoise); color: var(--sur-turquoise); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); transition: transform .16s ease-out, background .3s;
}
.assistant__bulle:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .assistant__bulle:hover { background: var(--texte); } }
/* L'icône : une bulle de dialogue dessinée en CSS, sans fichier ni police d'icônes. */
.assistant__bulle-icone { position: relative; width: 18px; height: 14px; border: 2px solid currentColor; border-radius: 5px; }
.assistant__bulle-icone::after { content: ""; position: absolute; left: 2px; bottom: -6px; width: 6px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; background: var(--turquoise); transform: skewY(-35deg); transition: background .3s; }
@media (hover: hover) and (pointer: fine) { .assistant__bulle:hover .assistant__bulle-icone::after { background: var(--texte); } }
.assistant.est-ouvert .assistant__bulle { display: none; }

.assistant__panneau {
	position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column;
	width: min(390px, calc(100vw - 28px)); height: min(620px, calc(100vh - 110px)); height: min(620px, calc(100dvh - 110px));
	background: #141414; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95); transform-origin: bottom right;
	transition: opacity .22s ease-out, transform .22s cubic-bezier(.23, 1, .32, 1);
}
@starting-style { .assistant__panneau:not([hidden]) { opacity: 0; transform: scale(.96); } }
.assistant__panneau[hidden] { display: none; }
.assistant__tete { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 16px 16px 14px 18px; border-bottom: 1px solid var(--trait); }
.assistant__titre { margin: 0; font: 800 17px/1.2 var(--titre); letter-spacing: -.01em; }
.assistant__sous { margin: 4px 0 0; font: 400 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muet); }
.assistant__fermer { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--trait); border-radius: 50%; background: none; color: var(--texte); font: 400 20px/1 var(--titre); cursor: pointer; }
.assistant__fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.assistant__avis { margin: auto 0; padding: 16px; border: 1px solid var(--trait); border-radius: 12px; background: #1a1a1a; }
.assistant__avis p { margin: 0 0 14px; color: #cfcec8; font-size: 14px; line-height: 1.5; }
.assistant__avis a { color: var(--turquoise); }
.assistant__avis .bouton { width: 100%; justify-content: center; cursor: pointer; }
.assistant__message { max-width: 88%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; }
.assistant__message p { margin: 0; }
.assistant__message p + p { margin-top: 8px; }
.assistant__message--assistant { align-self: flex-start; background: #202020; border-bottom-left-radius: 4px; }
.assistant__message--assistant a { color: var(--turquoise); word-break: break-word; }
.assistant__message--visiteur { align-self: flex-end; background: var(--turquoise); color: var(--sur-turquoise); border-bottom-right-radius: 4px; }
.assistant__points { display: inline-flex; gap: 4px; padding: 4px 0; }
.assistant__points i { width: 6px; height: 6px; border-radius: 50%; background: var(--muet); animation: points 1s ease-in-out infinite; }
.assistant__points i:nth-child(2) { animation-delay: .15s; }
.assistant__points i:nth-child(3) { animation-delay: .3s; }
@keyframes points { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.assistant__suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.assistant__suggestions[hidden], .assistant__saisie[hidden] { display: none; }
.assistant__suggestion { padding: 8px 12px; border: 1px solid var(--trait); border-radius: 999px; background: none; color: var(--texte); font: 400 13px/1.2 var(--titre); cursor: pointer; transition: border-color .2s, background .2s; }
@media (hover: hover) and (pointer: fine) { .assistant__suggestion:hover { border-color: var(--turquoise); } }
.assistant__saisie { display: flex; align-items: end; gap: 8px; margin: 0 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--trait); border-radius: 14px; background: #1a1a1a; }
.assistant__saisie:focus-within { border-color: var(--turquoise); }
.assistant__saisie textarea { flex: 1; min-height: 24px; max-height: 120px; padding: 6px 0; border: 0; background: none; color: var(--texte); font: 400 15px/1.45 var(--titre); resize: none; }
.assistant__saisie textarea:focus { outline: none; }
.assistant__envoyer { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: var(--turquoise); color: var(--sur-turquoise); font: 700 18px/1 var(--titre); cursor: pointer; }
.assistant__envoyer:active { transform: scale(.95); }
.assistant__pied { margin: 0; padding: 10px 16px 14px; font-size: 11px; line-height: 1.4; color: var(--muet); }
@media (max-width: 560px) {
	.assistant__bulle-texte { display: none; }
	.assistant__bulle { padding: 14px; }
	.assistant__panneau { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; border: 0; }
	.assistant-ouvert { overflow: hidden; }
}

/* ---------- Sans mouvement : lisible, immobile ---------- */
@media (prefers-reduced-motion: reduce) {
  .mur__piste, .ruban__piste { animation: none; }
  .js [data-lignes] .ligne > span { transform: none; transition: none; }
  .carte__cadre, .carte__cadre img, .bouton, .pastille { transition: none; }
  .studio { clip-path: none; }
  /* Les démos montrent leur état final : page montée, texte tapé, créneau réservé. */
  .demo, .demo * { animation: none !important; }
  .js .carte__cadre { clip-path: none; }
  .js .carte__cadre img { transform: none; }
  .curseur { transition: opacity .2s; }
  .nav, .nav.est-ouvert { transition: opacity .2s, visibility 0s; transform: none; }
  .js [data-apparait] { transform: none; transition: opacity .3s; transition-delay: 0s; }
  .etape::before { transition: none; transform: scaleX(1); }
  .rapport__scan, .rapport *, .question__reponse { animation: none !important; transition: none !important; }
  .assistant__panneau { transition: opacity .2s; }
  .telephone__page { animation: none; }
  .portable, .tablette, .telephone { transform: none !important; }
  .assistant__points i { animation: none; opacity: .7; }
}

/* ---------- Correctifs de l'audit de réactivité (2026-09-28) ---------- */

/* Comparatif en pile sous 760 px : `.compare tbody th { width: 22% }` gagnait
   sur la règle mobile (plus précise), et « LES CHANGEMENTS » débordait d'une
   cellule de 62 px. */
@media (max-width: 760px) { .compare tbody th, .compare td { width: auto; padding-right: 0; } }

/* Les très grands titres sur très petit écran : un seul mot long
   (« confidentialité », « Photography, ») dépassait l'écran de 320 px. On
   coupe avec un trait d'union, et au pire on casse le mot plutôt que la page. */
@media (max-width: 480px) {
  h1, h2, h3, .h2, .bandeau__titre { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}

/* Cibles tactiles : le logo (18 px de haut) et les liens légaux du pied
   (15 px) étaient sous le minimum de 24 px. */
.marque { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; }
.marque__globe { display: block; width: auto; height: 34px; }
.marque__web { color: var(--turquoise); }
/* Après la règle de base, sinon elle l'emporte par l'ordre du fichier. */
@media (max-width: 560px) { .marque { gap: 8px; } .marque__globe { height: 29px; } }
/* À 320 px, globe + nom mesuraient 174 px pour 148 disponibles à côté des
   langues et du burger : le nom débordait sous le sélecteur de langue. */
@media (max-width: 360px) { .marque { font-size: 14px; gap: 5px; } .marque__globe { height: 23px; } }
.pied__legal a, .pied__legal button { display: inline-block; padding-block: 5px; }

/* La bannière des témoins (z-index 9999, inc/tracking.php) couvrait le lien
   « Démarrer un projet » du menu mobile ouvert, à la première visite. On la
   masque le temps que le menu est ouvert ; elle revient à sa fermeture. */
.menu-ouvert #cb2-consent { visibility: hidden; }