/* ==========================================================================
   Studio LR — feuille de style du site
   --------------------------------------------------------------------------
   1. Jetons ................ couleurs, typographie, espacements, rayons
   2. Bases
   3. Le monde .............. fond jour/nuit, champ de chevrons, fil orange
   4. En-tête
   5. Le parcours ........... idée, constat, offres, compris, méthode,
                              équipe, passage, réalisations, questions, devis
   5 bis. Les logiciels ..... catalogue, page d'un logiciel, captures, prix
   6. Composants ............ boutons, liens, notes, formulaire
   7. Pied de page
   8. Tablettes et téléphones
   9. Réduire les animations
   10. Droite à gauche ....... arabe et hébreu
   Tout le site ne puise que dans les jetons de la section 1.
   ========================================================================== */


/* ==========================================================================
   1. JETONS
   ========================================================================== */
:root {
  /* Couleurs de marque, reprises du logo */
  --acier-haut: #eef0f2;
  --acier: #e5e8eb;
  --graphite-nuit: #16191f;
  --encre: #1a1e25;
  --encre-douce: #4b525d;
  --lune: #eceef1;
  --lune-douce: #a9b0ba;
  --orange: #f2561d;              /* ruban du logo : fil, lueurs, décor */
  --orange-pli: #ffd466;          /* reflet jaune du pli du ruban */
  --orange-action: #c8410f;       /* fond des boutons : texte blanc à 5:1 */
  --orange-action-survol: #ae380c;
  --orange-halo: rgba(242, 86, 29, .2);   /* halo des nœuds atteints et de la source du fil */
  --lueur: #f2561d;               /* lumière des chevrons du champ (champ.js), plus claire au cœur, */
  --lueur-coeur: #ffa34d;         /* le jour puis sur le fond de nuit */
  --lueur-nuit: #f2561d;
  --lueur-coeur-nuit: #ffa34d;
  --fil-1: #e3401a;               /* dégradé du fil, du haut de la page jusqu'à la nuit */
  --fil-2: #f2561d;
  --fil-3: #ff8a2a;

  /* Rôles : valeurs de jour, basculées par la classe .nuit */
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --accent-texte: #b63a0e;        /* orange lisible sur l'acier (4,7:1) */
  --accent-grand: #d94a14;        /* orange des grands chiffres (3,5:1) */
  --bordure: rgba(26, 30, 37, .16);
  --bordure-forte: rgba(26, 30, 37, .5);
  --surface: rgba(246, 247, 248, .72);
  --anneau: #b63a0e;              /* anneau de focus clavier */
  --erreur: #a3200e;

  /* Typographie : une seule famille, Archivo, dont on fait varier la largeur */
  --police: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-1: .8125rem;                                   /* 13 px : sources, mentions */
  --t-2: .9375rem;                                   /* 15 px : notes, étiquettes */
  --t-3: 1.0625rem;                                  /* 17 px : texte courant */
  --t-4: 1.25rem;                                    /* 20 px : chapô, intitulés */
  --t-5: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);    /* titres de niveau 3, prix */
  --t-6: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);      /* titres d'étape */
  --t-7: clamp(2.25rem, 1.2rem + 2.6vw, 3.25rem);    /* titre principal */
  --t-8: clamp(3.25rem, 2rem + 4.2vw, 5.5rem);       /* grand chiffre : prix d'un logiciel */

  /* Espacements */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 144px;
  --e-11: 208px;

  /* Rayons */
  --r-1: 6px;
  --r-2: 14px;

  /* Mise en page */
  --largeur: 1240px;
  --gouttiere: clamp(16px, 4vw, 48px);
  --fil-marge: clamp(36px, 5vw, 72px);  /* place du fil orange, au début des lignes (à gauche ; à droite en arabe et en hébreu) */
  --entete: 68px;

  /* Mouvement : une seule courbe, douce à l'arrivée, comme le logo */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Ombre portée des captures d'écran (logiciels) */
  --ombre-ecran: 0 24px 48px -28px rgba(22, 25, 31, .55);

  /* La tache d'encre qui s'étend depuis un nœud atteint : noire le jour, claire la nuit. Elle a
     du volume, éclairée d'en haut à gauche comme le logo : un corps plus clair en haut, un liseré
     de lumière sur les bords qui regardent la lumière, un reflet (couleur en r, g, b) et une ombre. */
  --tache-fond: #101216;
  --tache-texte: #ffffff;
  --tache-corps: linear-gradient(180deg, #23272f 0%, #121418 42%, #090a0c 100%);
  --tache-reflet: 255, 255, 255;
  --tache-filtre: url(#encre-jour);   /* le relief et l'ombre portée (filtre SVG écrit par site.js) */
  --tache-ombre-gouttes: drop-shadow(0 3px 3px rgba(12, 14, 18, .3));

  /* Chevrons dessinés (puces, barres, indicateurs) */
  --chevron-encre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M3.5 2.5 8.5 7l-5 4.5' fill='none' stroke='%231a1e25' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M3.5 2.5 8.5 7l-5 4.5' fill='none' stroke='%23d94a14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-lune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M3.5 2.5 8.5 7l-5 4.5' fill='none' stroke='%23a9b0ba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-bordeaux: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M3.5 2.5 8.5 7l-5 4.5' fill='none' stroke='%238f2c44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M3.5 2.5 8.5 7l-5 4.5' fill='none' stroke='%23e57b95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-puce: var(--chevron-orange);
  --chevron-indicateur: var(--chevron-encre);
}

.nuit {
  --texte: var(--lune);
  --texte-doux: var(--lune-douce);
  --accent-texte: #ff9a52;
  --accent-grand: #ff8a2a;
  --bordure: rgba(236, 238, 241, .16);
  --bordure-forte: rgba(236, 238, 241, .46);
  --surface: rgba(31, 35, 43, .8);
  --anneau: #ff9a52;
  --erreur: #ff9580;
  --chevron-indicateur: var(--chevron-lune);
  --ombre-ecran: 0 32px 64px -30px rgba(0, 0, 0, .85);
  --tache-fond: var(--lune);        /* sur le fond de nuit, une tache noire serait invisible : elle s'inverse */
  --tache-texte: var(--encre);
  --tache-corps: linear-gradient(180deg, #f6f7f9 0%, #e9ecf0 42%, #d2d7de 100%);
  --tache-filtre: url(#encre-nuit);
  --tache-ombre-gouttes: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
  color: var(--texte);
}

/* Thème ChaiTrace : les couleurs du logiciel remplacent celles du studio, sur ses pages (classe posée
   sur <body>) comme sur ses blocs dans les autres pages (classe et attribut data-teinte, que champ.js
   lit pour allumer les chevrons en bordeaux à leur hauteur). Le bordeaux prend la place de l'orange et
   l'or celle du jaune ; la nuit, un bordeaux plus clair reste lisible sur le graphite. */
.theme-chaitrace {
  --orange: #8f2c44;              /* bordeaux clair du logiciel : fil, nœuds, filets */
  --orange-pli: #e3c968;          /* or clair */
  --orange-action: #6d1a2e;       /* bordeaux du logiciel : texte blanc à 11,4:1 */
  --orange-action-survol: #470c1c;
  --orange-halo: rgba(143, 44, 68, .2);
  --accent-texte: #8f2c44;        /* 6,5:1 sur l'acier */
  --accent-grand: #8f2c44;
  --anneau: #8f2c44;
  --lueur: #8f2c44;               /* chevrons : bordeaux le jour, bordeaux clair la nuit */
  --lueur-coeur: #b8435f;
  --lueur-nuit: #c4546f;
  --lueur-coeur-nuit: #eb8fa4;
  --fil-1: #6d1a2e;
  --fil-2: #8f2c44;
  --fil-3: #c4546f;
  --chevron-puce: var(--chevron-bordeaux);
}
.theme-chaitrace .nuit,
.nuit .theme-chaitrace {
  --orange: #c4546f;              /* 4:1 sur le graphite */
  --orange-action: #8f2c44;       /* texte blanc à 8:1 */
  --orange-action-survol: #6d1a2e;
  --orange-halo: rgba(196, 84, 111, .25);
  --accent-texte: #eb8fa4;        /* 7,5:1 sur le graphite */
  --accent-grand: #e57b95;
  --anneau: #eb8fa4;
  --chevron-puce: var(--chevron-rose);
}


/* ==========================================================================
   2. BASES
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + var(--e-5));
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--police);
  font-size: var(--t-3);
  line-height: 1.6;
  color: var(--texte);
  /* Le fond passe du jour à la nuit le long de la page ; les deux repères
     (--nuit-debut, --nuit-fin) sont posés par site.js sur le « passage » */
  background: linear-gradient(180deg,
    var(--acier-haut) 0,
    var(--acier) 720px,
    var(--acier) var(--nuit-debut, 64%),
    var(--graphite-nuit) var(--nuit-fin, 70%),
    var(--graphite-nuit) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--anneau);
  outline-offset: 3px;
  border-radius: 2px;
}

.lien-evitement {
  position: fixed;
  top: var(--e-3);
  inset-inline-start: var(--e-3);
  z-index: 20;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-1);
  background: var(--encre);
  color: #fff;
  font-weight: 700;
  transform: translateY(-160%);
}
.lien-evitement:focus-visible { transform: none; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================================
   3. LE MONDE
   ========================================================================== */

/* Le champ de chevrons (champ.js) : fixe, derrière tout, transparent */
.champ {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Sans WebGL (ou sans JavaScript) : un motif fixe de chevrons, discret */
html:not(.avec-champ) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  background: var(--chevron-encre) 0 0 / 26px 26px;
}

/* Le fil orange (site.js) : du ruban du logo jusqu'au formulaire de devis */
.fil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.fil__rail {
  fill: none;
  stroke: url(#fil-rail);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: .1 11;          /* le chemin à venir, en pointillés */
}
.fil__lueur {
  fill: none;
  stroke: var(--orange);
  stroke-width: 12;
  stroke-linecap: round;
  opacity: .14;
}
.fil__trace {
  fill: none;
  stroke: url(#fil-couleur);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.fil__coeur { fill: var(--orange-pli); }
/* le dégradé du fil (défini dans chaque page) prend ses couleurs dans les jetons : un thème les change */
#fil-couleur stop:nth-child(1) { stop-color: var(--fil-1); }
#fil-couleur stop:nth-child(2) { stop-color: var(--fil-2); }
#fil-couleur stop:nth-child(3) { stop-color: var(--fil-3); }

main, .pied { position: relative; z-index: 2; }


/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: var(--texte);
  background: rgba(229, 232, 235, .88);
  border-bottom: 1px solid var(--bordure);
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.entete.nuit { background: rgba(22, 25, 31, .88); }

.entete__barre {
  max-width: var(--largeur);
  min-height: var(--entete);
  margin: 0 auto;
  padding: var(--e-2) var(--gouttiere);
  display: flex;
  align-items: center;
  gap: var(--e-6);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -.01em;
}
/* Le logo est graphite : une tuile claire le garde lisible la nuit */
.marque__tuile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-1);
  background: var(--acier);
}
.marque__tuile img { width: 34px; height: auto; }

.entete__nav {
  display: flex;
  gap: var(--e-5);
  margin-inline-start: auto;
  font-size: var(--t-2);
}
.entete__nav a {
  padding: var(--e-2) 0;
  color: var(--texte-doux);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s var(--ease), box-shadow .25s var(--ease);
}
.entete__seul { margin-inline-start: auto; }   /* bouton seul, sans navigation (page 404) */
.entete__nav a[aria-current="true"],
.entete__nav a[aria-current="page"] {
  color: var(--texte);
  box-shadow: inset 0 -2px 0 var(--orange);
}


/* ==========================================================================
   5. LE PARCOURS
   Chaque étape est une <section>, mais aucune n'a de fond ni de cadre :
   le champ, la couleur du ciel et le fil orange font le lien.
   ========================================================================== */
.etape {
  position: relative;
  max-width: var(--largeur);
  margin: 0 auto;
  padding-block: var(--e-11) 0;
  padding-inline: calc(var(--gouttiere) + var(--fil-marge)) var(--gouttiere);
}

.titre-1 {
  font-size: var(--t-7);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.03;
  letter-spacing: -.028em;
}
.titre-2 {
  position: relative;
  max-width: 24ch;
  font-size: var(--t-6);
  font-weight: 750;
  font-stretch: 110%;
  line-height: 1.08;
  letter-spacing: -.022em;
}
.texte {
  max-width: 62ch;
  margin-top: var(--e-5);
  color: var(--texte-doux);
}

/* Nœud du fil : placé dans la marge, à hauteur de la première ligne du titre */
.noeud {
  position: absolute;
  z-index: 2;                       /* au-dessus de la tache qui en part */
  top: calc(.54em - 8px);
  inset-inline-start: calc(var(--fil-marge) * -.5 - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bordure-forte);
  background: var(--acier);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nuit .noeud { background: var(--graphite-nuit); }
.noeud.atteint {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 6px var(--orange-halo);
}

/* La tache (site.js) : quand le fil atteint le nœud, l'encre s'étend depuis le point sur le titre,
   et le titre passe en blanc sur fond noir. Deux calques posés sur le titre, découpés par la même
   forme (clip-path, que site.js recalcule à chaque image pendant l'étalement ; masqués d'ici là) :
   - l'encre, dans un porteur qui l'éclaire en relief (filtre SVG, --tache-filtre) et lui donne son
     ombre portée : un dégradé, plus clair en haut, où glisse un reflet (--reflet, --brillance)
     pendant qu'elle s'étale ;
   - une copie du titre (attr data-texte), posée exactement sur l'original, hors du relief pour
     rester nette : une ligne à moitié couverte est blanche dans l'encre et foncée au-dehors. */
.tache-porteur,
.tache {
  --tache-debord: 2em;              /* place autour du titre pour le bord irrégulier de la tache */
  position: absolute;
  z-index: 1;
  top: calc(var(--tache-debord) * -1);
  inset-inline-end: calc(var(--tache-debord) * -1);
  bottom: calc(var(--tache-debord) * -1);
  inset-inline-start: calc((var(--tache-debord) + var(--fil-marge)) * -1);
  pointer-events: none;
}
.tache-porteur { filter: var(--tache-filtre); }
.tache-encre {
  position: absolute;
  inset: 0;
  clip-path: inset(50%);
  background:
    radial-gradient(ellipse 16% 75% at calc(4% + var(--reflet, 1) * 88%) 16%,
      rgba(var(--tache-reflet), var(--brillance, .1)), transparent 72%),
    var(--tache-corps);
}
.tache {
  padding-block: var(--tache-debord);
  padding-inline: calc(var(--tache-debord) + var(--fil-marge)) var(--tache-debord);
  color: var(--tache-texte);
  clip-path: inset(50%);
}
.tache::before { content: attr(data-texte); }
.filtres-encre { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Les gouttelettes projetées autour de la tache (site.js) : un SVG dont l'origine est le coin de la
   tache ; chaque goutte jaillit du bord vers sa place, un peu après l'encre, les plus lointaines en dernier */
.tache__gouttes {
  --tache-debord: 2em;              /* le même coin que la tache */
  position: absolute;
  z-index: 1;
  top: calc(var(--tache-debord) * -1);
  left: calc((var(--tache-debord) + var(--fil-marge)) * -1);
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
  filter: var(--tache-ombre-gouttes);
}
.goutte {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
  transition: transform .3s var(--ease);
}
.goutte__corps { fill: var(--tache-fond); }
.goutte__reflet { fill: rgba(var(--tache-reflet), .42); }
.tache-ouverte .goutte {
  transform: none;
  transition: transform .55s cubic-bezier(.34, 1.45, .64, 1) var(--delai, .3s);
}

/* ---------- L'idée (haut de page) ---------- */
.etape--idee {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--e-7);
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--entete) + var(--e-8));
  padding-bottom: var(--e-9);
  padding-inline-start: var(--gouttiere);
}
.idee__texte { max-width: 44rem; }
/* Sous le titre de l'accueil : l'offre la plus demandée */
.accroche {
  margin-top: var(--e-4);
  font-size: var(--t-5);
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.chapo {
  max-width: 52ch;
  margin-top: var(--e-5);
  font-size: var(--t-4);
  line-height: 1.5;
  color: var(--texte-doux);
}
.idee__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-5);
  margin-top: var(--e-6);
}
.preuve {
  max-width: 52ch;
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--bordure);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.preuve strong { color: var(--texte); }
.idee__logo {
  position: relative;
  justify-self: center;
  width: min(100%, 460px);
}
/* Le logo en relief (logo3d.js) : un canevas posé sur le logo à plat, un peu plus grand que lui
   pour laisser la place au relief quand il tourne. Il apparaît une fois l'intro du SVG finie :
   une lame de lumière traverse le logo, le dessin s'efface devant elle (ce masque) pendant que
   le modèle apparaît derrière elle (dans le canevas). L'angle, 115deg, est aussi dans logo3d.js. */
.logo3d {
  position: absolute;
  top: -14%;
  left: -14%;
  width: 128%;
  height: 128%;
  opacity: 0;
  pointer-events: none;
}
.idee__logo.en-relief { cursor: pointer; }
.idee__logo.en-relief .logo3d { opacity: 1; }
.idee__logo.en-balayage > .lr-logo {
  -webkit-mask-image: linear-gradient(115deg, transparent calc(var(--balai, -.1) * 100% - 1.2%), #000 calc(var(--balai, -.1) * 100% + 1.8%));
  mask-image: linear-gradient(115deg, transparent calc(var(--balai, -.1) * 100% - 1.2%), #000 calc(var(--balai, -.1) * 100% + 1.8%));
}
.idee__logo.relief-fait > .lr-logo { opacity: 0; }   /* invisible, mais toujours lu : « Studio LR » */

/* ---------- Le constat : coût sur trois ans ---------- */
.comparatif { max-width: 860px; margin: var(--e-7) 0 0; }
.comparatif figcaption {
  margin-bottom: var(--e-5);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.comparatif__liste { list-style: none; display: grid; gap: var(--e-5); }
.comparatif__ligne {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--e-5);
  row-gap: var(--e-1);
}
.comparatif__nom { font-weight: 700; font-stretch: 106%; }
.comparatif__montant {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.comparatif__detail {
  grid-column: 2 / -1;
  font-size: var(--t-2);
  color: var(--texte-doux);
}
/* Une barre = des chevrons ; un chevron vaut 250 €, arrondi au chevron entier */
.comparatif__barre {
  display: flex;
  height: 14px;
  min-width: 0;
}
.comparatif__barre::before,
.comparatif__barre::after {
  content: "";
  flex: none;
  height: 14px;
  background: var(--chevron-encre) left center / 12px 14px repeat-x;
}
.comparatif__barre::before { width: calc(var(--min) / 250 * 12px); width: round(down, calc(var(--min) / 250 * 12px), 12px); }
.comparatif__barre::after {
  width: calc((var(--max, var(--min)) - var(--min)) / 250 * 12px);
  width: round(down, calc((var(--max, var(--min)) - var(--min)) / 250 * 12px), 12px);
  max-width: calc(100% - var(--min) / 250 * 12px);
  opacity: .35;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent);
}
.comparatif__ligne--nous .comparatif__nom,
.comparatif__ligne--nous .comparatif__montant { color: var(--accent-texte); }
.comparatif__ligne--nous .comparatif__barre::before { background-image: var(--chevron-puce); }
.comparatif__note {
  margin-top: var(--e-5);
  font-size: var(--t-1);
  color: var(--texte-doux);
}

/* ---------- Les offres : une grille de tarifs, pas des cartes ---------- */
.tarifs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--e-8);
  max-width: 1040px;
  margin-top: var(--e-7);
}
.tarif {
  padding: var(--e-5) 0 var(--e-6);
  border-top: 1px solid var(--bordure-forte);
}
.tarif__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
}
.tarif__nom { font-size: var(--t-5); font-stretch: 108%; letter-spacing: -.01em; }
/* le nom de chaque offre mène à la page du service */
.tarif__nom a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bordure-forte);
  text-underline-offset: 6px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
@media (hover: hover) {
  .tarif__nom a:hover { color: var(--accent-texte); text-decoration-color: currentColor; }
}
.tarif__prix {
  font-size: var(--t-5);
  font-weight: 800;
  font-stretch: 104%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tarif__prix small {
  margin-inline-end: var(--e-1);
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--texte-doux);
}
.tarif__texte { max-width: 44ch; margin-top: var(--e-2); color: var(--texte-doux); }
.tarif--conseille { border-top: 3px solid var(--orange); }
.tarif__conseil {
  margin-top: var(--e-3);
  font-size: var(--t-2);
  font-weight: 650;
  color: var(--accent-texte);
}
.tarifs__apres {
  max-width: 72ch;
  margin-top: var(--e-6);
  color: var(--texte-doux);
}
.tarifs__apres strong { color: var(--texte); }

/* ---------- Compris dans chaque offre ---------- */
.atouts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-7) var(--e-8);
  max-width: 1040px;
  margin-top: var(--e-7);
}
.atouts li {
  position: relative;
  padding-inline-start: var(--e-6);
  color: var(--texte-doux);
}
.atouts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  width: 12px;
  height: 14px;
  background: var(--chevron-puce) center / 12px 14px no-repeat;
}
.atouts strong {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--t-4);
  font-stretch: 106%;
  color: var(--texte);
}

/* ---------- La méthode : une vraie suite de trois étapes ---------- */
.methode {
  list-style: none;
  counter-reset: pas;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-7);
  max-width: 1080px;
  margin-top: var(--e-7);
}
.methode li { counter-increment: pas; color: var(--texte-doux); }
.methode li::before {
  content: counter(pas);
  display: block;
  margin-bottom: var(--e-4);
  font-size: var(--t-6);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  color: var(--accent-grand);
}
.methode h3 {
  margin-bottom: var(--e-2);
  font-size: var(--t-5);
  font-stretch: 108%;
  color: var(--texte);
}

/* ---------- L'équipe : deux personnes ; leurs initiales répondent aux chiffres de la méthode ---------- */
.equipe {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-7) var(--e-8);
  max-width: 1040px;
  margin-top: var(--e-7);
}
.personne {
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure-forte);
  color: var(--texte-doux);
}
.personne__initiales {
  font-size: var(--t-6);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-grand);
}
.personne h3 {
  margin-top: var(--e-4);
  font-size: var(--t-5);
  font-stretch: 108%;
  color: var(--texte);
}
.personne__role {
  margin-top: var(--e-1);
  font-size: var(--t-2);
  font-weight: 650;
  color: var(--accent-texte);
}
.personne__role + p { margin-top: var(--e-3); }
.personne__lien { margin-top: var(--e-4); }

/* ---------- Le passage : le jour tombe ---------- */
.passage {
  position: relative;
  display: grid;
  align-items: end;
  max-width: var(--largeur);
  min-height: 120vh;
  margin: 0 auto;
  padding-block: 0 var(--e-9);
  padding-inline: calc(var(--gouttiere) + var(--fil-marge)) var(--gouttiere);
}
.passage__texte {
  position: relative;
  z-index: 1;                       /* au-dessus de la statue */
  max-width: 20ch;
  font-size: var(--t-6);
  font-weight: 750;
  font-stretch: 110%;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--lune);
}
.passage__texte span {
  display: block;
  margin-top: var(--e-4);
  font-size: var(--t-4);
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--lune-douce);
}

/* La statue (statue.js) : du marbre, et dessous une armure qu'un rond révèle autour de la
   souris. Elle se tient au milieu du passage, la tête dans le soir, les pieds dans la nuit. */
.statue {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  bottom: var(--e-8);
  height: min(calc(100% - 2 * var(--e-8)), calc(100vh - var(--entete) - var(--e-7)));   /* on la voit en entier */
  aspect-ratio: 545 / 1402;
  pointer-events: none;
}
.statue__marbre,
.statue__cyber {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Réalisations ---------- */
.cas {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
  max-width: 920px;
  margin-top: var(--e-7);
  padding: var(--e-6);
  border: 1px solid var(--bordure);
  border-radius: var(--r-2);
  background: var(--surface);
}
.cas + .cas { margin-top: var(--e-5); }
.cas__visuel {
  width: 168px;
  height: 168px;
  padding: var(--e-3);
  border-radius: calc(var(--r-2) - 6px);
  background: var(--acier-haut);
}
.cas__visuel img { width: 100%; height: auto; }
.cas h3 { font-size: var(--t-5); font-stretch: 108%; }
.cas p { margin-top: var(--e-3); color: var(--texte-doux); }
.cas__faits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-4);
  font-size: var(--t-2);
}
.cas__faits li {
  padding-inline-start: var(--e-5);
  background: var(--chevron-puce) left .25em / 10px 12px no-repeat;
}
.cas--ce-site,
.cas--texte { grid-template-columns: minmax(0, 1fr); }
.cas p.cas__lien { margin-top: var(--e-4); }

/* ---------- Questions fréquentes ---------- */
.faq {
  max-width: 860px;
  margin-top: var(--e-7);
  border-top: 1px solid var(--bordure-forte);
}
.faq details { border-bottom: 1px solid var(--bordure); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-5) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-4);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 14px;
  margin-top: .3em;
  background: var(--chevron-indicateur) center / 12px 14px no-repeat;
  transform: rotate(90deg);
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-90deg); }
.faq details > p {
  max-width: 68ch;
  padding-bottom: var(--e-5);
  color: var(--texte-doux);
}
/* Une longue FAQ se lit par thème : un intitulé avant chaque groupe de questions */
.faq__groupe {
  margin-top: var(--e-7);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--bordure);
  font-size: var(--t-2);
  font-weight: 700;
  font-stretch: 108%;
  color: var(--accent-texte);
}
.faq__groupe:first-child { margin-top: var(--e-5); }

/* L'encart de la version bêta, juste avant l'inscription : ce qu'il faut savoir, dit simplement */
.encart {
  max-width: 860px;
  margin-top: var(--e-7);
  padding: var(--e-5) var(--e-6);
  border: 1px solid var(--bordure);
  border-inline-start: 3px solid var(--orange);
  border-radius: var(--r-1);
  background: var(--surface);
}
.encart h3 { font-size: var(--t-4); font-stretch: 106%; }
.encart p { max-width: 70ch; margin-top: var(--e-3); color: var(--texte-doux); }
.encart a { color: var(--texte); text-underline-offset: 4px; }

/* ---------- Devis ---------- */
/* Page de remerciement de l'inscription en ligne : la clé d'accès (inscription.js) */
.acces__infos { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.acces__infos dt { font-size: var(--t-2); color: var(--texte-doux); }
.acces__infos dd { margin: var(--e-1) 0 0; font-size: var(--t-5); font-weight: 700; color: var(--texte); overflow-wrap: anywhere; }
.acces__cle {
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  user-select: all;
}
.acces__copier { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.acces__etapes { margin-top: var(--e-6); padding-inline-start: var(--e-5); }

/* Page d'un logiciel : après l'inscription en ligne, le formulaire de question ou de démonstration */
.essai__autre {
  margin-top: var(--e-9);
  font-size: var(--t-5);
  font-stretch: 108%;
}
.devis {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: start;
  max-width: 1080px;
  margin-top: var(--e-7);
  padding-bottom: var(--e-9);
}
.devis__direct { display: grid; gap: var(--e-3); color: var(--texte-doux); }
.devis__direct h3 {
  margin-bottom: var(--e-1);
  font-size: var(--t-4);
  font-stretch: 106%;
  color: var(--texte);
}
.devis__direct a { color: var(--texte); font-weight: 600; text-underline-offset: 4px; }


/* ==========================================================================
   5 bis. LES LOGICIELS
   Le catalogue (logiciels.html) et la page d'un logiciel (chaitrace.html) :
   le même monde, le même fil. Ici le fil naît d'une source posée dans la
   marge, et le logiciel se montre par ses vrais écrans.
   ========================================================================== */

/* La source du fil, dans la marge, à hauteur de la première ligne du titre */
.titre-1 { position: relative; }
.fil-source {
  position: absolute;
  top: calc(.52em - 9px);
  inset-inline-start: calc(var(--fil-marge) * -.5 - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px var(--orange-halo);
}

/* ---------- Haut de page d'un logiciel ---------- */
.etape--produit {
  padding-top: calc(var(--entete) + var(--e-9));
}
.etape--fin { padding-bottom: var(--e-10); }   /* dernière étape d'une page sans formulaire */

/* ---------- Pages de service (site vitrine, boutique, refonte, application) ---------- */
.ariane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.ariane a { color: var(--texte); text-underline-offset: 4px; }
.services__autres {
  margin-top: var(--e-8);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.services__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  margin-top: var(--e-3);
}
.produit__texte { max-width: 46rem; }
.produit__marque {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  margin-bottom: var(--e-5);
  font-size: var(--t-5);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.produit__marque span {
  font-size: var(--t-2);
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--texte-doux);
}
/* la grappe du logo de ChaiTrace, dans la marge : le fil en coule */
.produit__source {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--fil-marge) * -.5);
  width: clamp(34px, 4.2vw, 60px);
  height: auto;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- L'écusson de ChaiTrace (bouteille3d.js) ----------
   Un écusson brodé, bordeaux et or comme le logiciel, avec son texte en anneau qui tourne ; devant
   lui, la bouteille en 3D (un canevas plus haut que l'écusson : sa tête dépasse). La souris incline
   l'écusson ; sans 3D, une image fixe de la bouteille (patch--repli). Sur grand écran, il occupe la
   place libre à droite du titre ; plus étroit, il se pose sur le coin de la capture d'écran. */
.etape--patch {
  display: grid;
  grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
  column-gap: var(--e-7);
  align-items: center;
}
.etape--patch > .ecran { grid-column: 1 / -1; }
.patch {
  --patch: clamp(250px, 24vw, 340px);
  position: relative;
  justify-self: center;
  width: var(--patch);
  height: calc(var(--patch) * 1.36);
}
.patch__ecusson {                  /* l'écusson, qui s'incline vers la souris (bouteille3d.js) */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1;
}
.patch__disque,
.patch__anneau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.patch__disque { filter: drop-shadow(0 16px 24px rgba(26, 30, 37, .3)); }
.patch__texte {
  font-family: var(--police);
  font-size: 15px;
  font-weight: 800;
  fill: #e8c173;
}
.patch__anneau {
  animation: patch-tour 40s linear infinite;
  will-change: transform;
}
@keyframes patch-tour { to { transform: rotate(360deg); } }
.patch__eclat { mix-blend-mode: overlay; }
.patch__bouteille,
.patch--repli::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(10, 2, 4, .55));
}
.patch__bouteille { opacity: 0; transition: opacity .45s var(--ease); }  /* en fondu, à sa première image */
.patch--3d .patch__bouteille { opacity: 1; }
.patch--repli::after {
  content: "";
  background: url("../img/bouteille-patch.webp") center / 100% 100% no-repeat;
}
/* la bouteille mène au site du Château Latour-Martillac : un lien posé sur elle, découpé à sa silhouette
   (le profil de bouteille3d.js, un peu élargi), pour que le reste de l'écusson ne soit pas cliquable */
.patch__lien {
  position: absolute;
  z-index: 2;
  left: 34.64%;
  width: 30.73%;
  top: 2.8%;
  bottom: 14.6%;
  clip-path: polygon(4.5% 100%, 2.3% 97.7%, 0.9% 97%, 0.9% 38.7%, 1.6% 34.5%, 2.7% 33.1%, 4.2% 32.1%, 6% 31.1%, 8.5% 30.1%, 12.5% 28.9%, 15.6% 28.2%, 21.4% 26.9%, 24.3% 26.2%, 26.7% 25.2%, 28.1% 24.2%, 29% 21.8%, 30.5% 16.9%, 31.7% 11.5%, 31.9% 10%, 31.4% 6.4%, 29.4% 5.6%, 28.1% 4.9%, 28.3% 3.2%, 29.6% 2.2%, 31.5% .7%, 32.2% .6%, 67.8% .6%, 68.5% .7%, 70.4% 2.2%, 71.7% 3.2%, 71.9% 4.9%, 70.6% 5.6%, 68.6% 6.4%, 68.1% 10%, 68.3% 11.5%, 69.5% 16.9%, 71% 21.8%, 71.9% 24.2%, 73.3% 25.2%, 75.7% 26.2%, 78.6% 26.9%, 84.4% 28.2%, 87.5% 28.9%, 91.5% 30.1%, 94% 31.1%, 95.8% 32.1%, 97.3% 33.1%, 98.4% 34.5%, 99.1% 38.7%, 99.1% 97%, 97.7% 97.7%, 95.5% 100%);
}
.patch__lien:focus-visible { clip-path: none; outline-offset: 6px; border-radius: 999px; }
.patch--repli:has(.patch__lien:hover)::after { filter: drop-shadow(0 10px 12px rgba(10, 2, 4, .55)) brightness(1.12); }
.partenaire {
  margin-top: var(--e-3);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.partenaire a { color: var(--texte); font-weight: 650; text-underline-offset: 4px; }
@media (max-width: 1180px) {
  .etape--patch { display: block; }
  .patch {
    --patch: clamp(190px, 44vw, 250px);
    z-index: 2;
    margin: var(--e-5) var(--e-3) calc(var(--patch) * -.45) auto;
  }
  .etape--patch > .ecran { margin-top: 0; }
}

/* ---------- Captures d'écran ---------- */
.ecran { margin: 0; }
.ecran img {
  width: 100%;
  height: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--r-2);
  background: var(--acier-haut);
  box-shadow: var(--ombre-ecran);
}
.ecran figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.ecran--large { max-width: 1120px; margin-top: var(--e-8); }

/* Téléphone : un cadre sombre, arrondi comme l'appareil */
.telephone {
  justify-self: center;
  width: min(100%, 290px);
  margin: 0;
}
.telephone img {
  width: 100%;
  height: auto;
  border: 7px solid var(--encre);
  border-radius: 34px;
  background: var(--acier-haut);
  box-shadow: 0 0 0 1px var(--bordure-forte), var(--ombre-ecran);
}
.telephone figcaption {
  margin-top: var(--e-4);
  font-size: var(--t-2);
  text-align: center;
  color: var(--texte-doux);
}

/* ---------- Une étape du logiciel : le texte, puis l'écran à côté ---------- */
.station {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-7) var(--e-8);
  align-items: start;
  max-width: 1120px;
  margin-top: var(--e-7);
}
.station > div > .texte:first-child { margin-top: 0; }
.station--telephone { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }

/* Des faits courts, chacun précédé d'un chevron */
.faits {
  list-style: none;
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-5);
  color: var(--texte-doux);
}
.faits li { position: relative; padding-inline-start: var(--e-5); }
.faits li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .38em;
  width: 10px;
  height: 12px;
  background: var(--chevron-puce) center / 10px 12px no-repeat;
}
.faits strong { color: var(--texte); }
.faits--bref { max-width: 78ch; margin-top: var(--e-7); gap: var(--e-4); }   /* « En bref », sous le titre d'étape */
.note-petite {
  max-width: 62ch;
  margin-top: var(--e-5);
  font-size: var(--t-2);
  color: var(--texte-doux);
}

/* ---------- Le prix d'un logiciel ---------- */
.prix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-7) var(--e-9);
  align-items: start;
  max-width: 1080px;
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: 3px solid var(--orange);
}
.prix__chiffre {
  font-size: var(--t-8);
  font-weight: 800;
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--accent-grand);
}
.prix__chiffre span {
  margin-inline-start: var(--e-2);
  font-size: var(--t-4);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--texte);
}
.prix__annuel { margin-top: var(--e-4); font-size: var(--t-4); color: var(--texte); }
.prix__note {
  max-width: 52ch;
  margin-top: var(--e-5);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.prix__note a { color: var(--texte); text-underline-offset: 4px; }
.prix .faits { margin-top: 0; gap: var(--e-4); }

/* ---------- Le catalogue (logiciels.html) ---------- */
.logiciel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-7) var(--e-8);
  align-items: center;
  max-width: 1120px;
  margin-top: var(--e-7);
}
.logiciel__marque {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-2);
  font-weight: 650;
  color: var(--accent-texte);
}
.logiciel__marque img { width: 48px; height: 48px; border-radius: 50%; }
.logiciel h3 {
  margin-top: var(--e-4);
  font-size: var(--t-6);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.logiciel__accroche { margin-top: var(--e-2); font-size: var(--t-4); color: var(--texte); }
.logiciel__texte > p:not(.logiciel__marque):not(.logiciel__accroche) { margin-top: var(--e-4); color: var(--texte-doux); }
.logiciel__prix strong { color: var(--texte); }
.logiciel .idee__actions { margin-top: var(--e-5); }

/* ---------- Formulaire : case à cocher des conditions ---------- */
.case {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-2) var(--e-3);
  align-items: start;
}
.case input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--orange-action);
  cursor: pointer;
}
.case label { font-size: var(--t-2); line-height: 1.5; cursor: pointer; }
.case label a { color: var(--texte); text-underline-offset: 3px; }
.case .zone__erreur { grid-column: 2; }
.case input[aria-invalid="true"] { outline: 2px solid var(--erreur); outline-offset: 2px; }


/* ==========================================================================
   6. COMPOSANTS
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--e-5);
  border: 0;
  border-radius: var(--r-1);
  background: var(--orange-action);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-stretch: 106%;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .15s var(--ease);
}
.bouton--petit { min-height: 40px; padding: 0 var(--e-4); font-size: var(--t-2); }
.bouton:active { transform: translateY(1px) scale(.985); }
.bouton[disabled] { cursor: progress; opacity: .7; }

.lien {
  color: var(--texte);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .25s var(--ease), color .25s var(--ease);
}

/* Appels de note (sources en pied de page) */
.note {
  margin-inline-start: 1px;
  font-size: .72em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  color: var(--accent-texte);
  text-decoration: none;
}

@media (hover: hover) {
  .bouton:hover { background: var(--orange-action-survol); }
  .lien:hover { color: var(--accent-texte); text-decoration-color: var(--accent-texte); }
  .entete__nav a:hover { color: var(--texte); }
  .faq summary:hover { color: var(--accent-texte); }
  .devis__direct a:hover { color: var(--accent-texte); }
  .note:hover { text-decoration: underline; }
  .prix__note a:hover, .case label a:hover, .partenaire a:hover { color: var(--accent-texte); }
  .langues a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 4px; }
  .encart a:hover { color: var(--accent-texte); }
}

/* ---------- Formulaire de devis ---------- */
.formulaire {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5);
  padding: var(--e-6);
  border: 1px solid var(--bordure);
  border-radius: var(--r-2);
  background: var(--surface);
}
.zone { display: grid; gap: var(--e-2); align-content: start; }
.zone--large { grid-column: 1 / -1; }
.zone label { font-size: var(--t-2); font-weight: 650; }
.zone label span { font-weight: 400; color: var(--texte-doux); }
.zone input,
.zone select,
.zone textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-1);
  background: rgba(236, 238, 241, .06);
  color: var(--texte);
  font: inherit;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.zone textarea { min-height: 150px; resize: vertical; }
.zone select {
  appearance: none;
  padding-inline-end: var(--e-7);
  background: rgba(236, 238, 241, .06) var(--chevron-indicateur) right var(--e-4) center / 12px 14px no-repeat;
}
.zone select option { color: var(--encre); }
.zone input:focus-visible,
.zone select:focus-visible,
.zone textarea:focus-visible { border-color: var(--anneau); outline-offset: 1px; }
.zone [aria-invalid="true"] { border-color: var(--erreur); }
.zone__erreur { font-size: var(--t-2); font-weight: 600; color: var(--erreur); }
.zone__erreur:empty { display: none; }

.formulaire__envoi {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-5);
}
.formulaire__note { max-width: 44ch; font-size: var(--t-1); color: var(--texte-doux); }
.formulaire__statut { grid-column: 1 / -1; font-weight: 600; }
.formulaire__statut:empty { display: none; }
.formulaire__statut--erreur { color: var(--erreur); }

/* Piège à robots : invisible pour les humains, rempli par les robots */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.confirmation {
  padding: var(--e-6);
  border: 1px solid var(--orange);
  border-radius: var(--r-2);
  background: var(--surface);
}
.confirmation h3 { font-size: var(--t-5); font-stretch: 108%; }
.confirmation p { margin-top: var(--e-3); color: var(--texte-doux); }


/* ==========================================================================
   7. PIED DE PAGE
   ========================================================================== */
.pied {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-block: var(--e-9) var(--e-7);
  padding-inline: calc(var(--gouttiere) + var(--fil-marge)) var(--gouttiere);
  border-top: 1px solid var(--bordure);
  font-size: var(--t-2);
  color: var(--texte-doux);
}
.pied__haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-5) var(--e-8);
}
.pied__identite { max-width: 52ch; }
.pied__identite strong { color: var(--texte); }
.pied__identite a { color: var(--texte); text-underline-offset: 4px; white-space: nowrap; }
.pied__liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pied__liens a { color: var(--texte); text-underline-offset: 4px; }
.sources {
  display: grid;
  gap: var(--e-2);
  max-width: 90ch;
  margin-top: var(--e-7);
  padding-inline-start: var(--e-5);
  font-size: var(--t-1);
}
.sources a { color: var(--texte); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pied__bas { margin-top: var(--e-6); font-size: var(--t-1); }

/* La liste des langues, en bas de chaque page (écrite par outils/i18n/site_i18n.py) : chaque langue
   dans sa propre écriture ; le choix est retenu par langue.js */
.langues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
  font-size: var(--t-2);
}
.langues__icone { flex: none; width: 18px; height: 18px; color: var(--texte-doux); }
.langues a { color: var(--texte-doux); text-decoration: none; }
.langues a[aria-current] { color: var(--texte); font-weight: 700; }
.pied-simple {                    /* les pages courtes n'ont pas de pied de page : seulement les langues */
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) var(--e-8);
  color: var(--texte-doux);
}
.pied-simple .langues { margin-top: 0; }


/* ---------- Pages simples : mentions, confidentialité, 404, confirmation ---------- */
body.page-jour {                 /* pas de nuit sur ces pages courtes */
  background: linear-gradient(180deg, var(--acier-haut) 0, var(--acier) 720px, var(--acier) 100%);
}
.page-simple {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: calc(var(--entete) + var(--e-9)) var(--gouttiere) var(--e-9);
}
.page-simple h1 { font-size: var(--t-6); font-weight: 800; font-stretch: 108%; letter-spacing: -.022em; line-height: 1.08; }
.page-simple h2 { margin-top: var(--e-7); font-size: var(--t-5); font-stretch: 106%; }
.page-simple p,
.page-simple li { margin-top: var(--e-3); color: var(--texte-doux); }
.page-simple ul,
.page-simple ol { padding-inline-start: var(--e-5); }
.page-simple strong { color: var(--texte); }
.page-simple a:not(.bouton) { color: var(--texte); text-underline-offset: 4px; }
.page-simple .maj { margin-top: var(--e-7); font-size: var(--t-2); }
.page-simple .idee__actions { margin-top: var(--e-7); }
.grand-code {
  font-size: clamp(4rem, 2rem + 10vw, 9rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--accent-grand);
}


/* ==========================================================================
   8. TABLETTES ET TÉLÉPHONES
   ========================================================================== */
@media (max-width: 960px) {
  .etape--idee {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--e-6);
    padding-top: calc(var(--entete) + var(--e-6));
    padding-inline-start: calc(var(--gouttiere) + var(--fil-marge));   /* le fil descend dans la marge */
  }
  .idee__logo { order: -1; width: min(62vw, 300px); }
  .tarifs, .atouts { grid-template-columns: minmax(0, 1fr); }
  .methode { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .devis { grid-template-columns: minmax(0, 1fr); gap: var(--e-7); }
  .equipe, .station, .station--telephone, .prix, .logiciel { grid-template-columns: minmax(0, 1fr); }
  .ecran--large { margin-top: var(--e-7); }
  /* la statue entre dans le flux, centrée */
  .passage { align-content: end; gap: var(--e-7); }
  .statue { position: relative; left: auto; right: auto; bottom: auto; justify-self: center; height: min(56vh, 520px); }
}

/* De 801 à 960 px, une navigation de cinq liens (accueil, page ChaiTrace) ne tient pas à côté du nom du
   studio : on garde la tuile du logo, comme sur téléphone, et les liens se resserrent */
@media (max-width: 960px) {
  .entete__barre:has(.entete__nav > a:nth-child(5)) .marque__nom { display: none; }
  .entete__nav { gap: var(--e-4); }
}

@media (max-width: 800px) {
  .entete__nav { display: none; }
  .entete .bouton { margin-inline-start: auto; }
}

@media (max-width: 640px) {
  :root { --entete: 60px; }
  .etape { padding-top: var(--e-10); }
  .br-large { display: none; }
  .marque__nom { display: none; }
  .comparatif__ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .comparatif__barre { grid-column: 1 / -1; grid-row: 2; }
  .comparatif__detail { grid-column: 1 / -1; }
  .formulaire { grid-template-columns: minmax(0, 1fr); padding: var(--e-5); }
  .cas { grid-template-columns: minmax(0, 1fr); padding: var(--e-5); }
  .cas__visuel { width: 120px; height: 120px; }
  .passage { min-height: 100vh; }
}


/* ==========================================================================
   9. RÉDUIRE LES ANIMATIONS
   Le contenu est toujours visible sans animation ; ici on coupe les
   transitions, le défilement doux et les mouvements du champ (champ.js).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   10. LANGUES ÉCRITES DE DROITE À GAUCHE (arabe, hébreu : <html dir="rtl">)
   Les marges, le fil, ses nœuds et les taches d'encre suivent le sens de lecture par les propriétés
   logiques (inset-inline-start…) ; restent ici les réglages que le sens ne retourne pas tout seul.
   ========================================================================== */
[dir="rtl"] .tache__gouttes { left: calc(var(--tache-debord) * -1); }    /* le coin gauche de la tache */
[dir="rtl"] .produit__source { transform: translate(50%, -50%); }
[dir="rtl"] .faits li::before,
[dir="rtl"] .atouts li::before { transform: scaleX(-1); }                 /* le chevron pointe vers le texte */
[dir="rtl"] .cas__faits li { background-position: right .25em; }
[dir="rtl"] .zone select { background-position: left var(--e-4) center; }

/* Les langues aux mots longs (allemand, hongrois, grec, géorgien…) : sur un téléphone, un titre coupe un
   mot trop long plutôt que de déborder de l'écran ; le français garde ses titres tels quels */
h1, h2, h3, summary, .bouton { overflow-wrap: break-word; }
html:not([lang="fr"]) :is(h1, h2, h3, summary) { hyphens: auto; }
/* Des libellés plus longs qu'en français (arménien, géorgien…) : le prix d'une offre passe sous son nom, et
   le montant du comparatif peut aller à la ligne ; sur téléphone, il passe sous le nom */
html:not([lang="fr"]) .tarif__tete { flex-wrap: wrap; }
html:not([lang="fr"]) .comparatif__montant { white-space: normal; }
@media (max-width: 640px) {
  html:not([lang="fr"]) .comparatif__ligne { grid-template-columns: minmax(0, 1fr); }
  html:not([lang="fr"]) .comparatif__montant { text-align: start; }
  html:not([lang="fr"]) .comparatif__barre { grid-row: auto; }
}