/* ==========================================================================
   Archipel Horizon — feuille de style du site (dérivée de Commercial/charte/style.css)
   Police : Source Sans 3, hébergée dans fonts/ (plus aucune requête vers Google Fonts)
   ========================================================================== */

/* Source Sans 3, sous-ensemble latin, fichier variable : un seul .woff2 couvre les graisses
   400, 500, 600 et 700 utilisées par le site. C'est le fichier que Google Fonts servait pour ces
   quatre graisses (v19), copié tel quel. Licence SIL Open Font License 1.1 : fonts/OFL.md. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* ---------- Couleurs claires ---------- */
  --fond:              #FFFFFF;
  --fond-2:            #EDF1F3;   /* gris bleuté — section des deux offres */
  --fond-3:            #F6F8F9;   /* encarts très discrets */
  --texte:             #1F2E36;   /* bleu-gris foncé — 12,6:1 sur blanc */
  --texte-2:           #55666F;   /* 5,5:1 sur blanc */
  --bordure:           #D5DDE1;
  --bordure-forte:     #1F2E36;

  /* ---------- Fond sombre : contact + pied de page ---------- */
  --fond-sombre:         #12313E;
  --texte-sur-sombre:    #FFFFFF; /* 13,9:1 */
  --texte-2-sur-sombre:  #C6D4DA; /* 8,9:1 */
  --bordure-sombre:      rgba(255, 255, 255, 0.22);
  --points-sombre:       rgba(255, 255, 255, 0.10); /* grille de points des fonds sombres */
  --points-pas:          26px;                      /* espacement de cette grille */

  /* ---------- Accent ---------- */
  --accent:              #8C2F2B; /* 7,0:1 sur blanc, 6,4:1 sur --fond-2 */
  --accent-survol:       #6F2422;
  --accent-actif:        #5A1D1B;
  --accent-focus:        #8C2F2B; /* anneau de focus */
  --sur-accent:          #FFFFFF;
  --accent-sur-sombre:   #EBC2BB; /* survol des liens sur fond sombre */
  --accent-trace:        rgba(140, 47, 43, 0.45); /* route des étapes : points en attente, traînée du point lumineux */
  --accent-lueur:        rgba(140, 47, 43, 0.40); /* lueur du point lumineux des étapes, ajoutée le 2026-09-18 */

  /* ---------- Sondes de carte marine ---------- */
  --sonde-clair:  rgba(23, 50, 61, 0.22);
  --sonde-sombre: rgba(255, 255, 255, 0.22);

  /* ---------- Typographie ---------- */
  --police: "Source Sans 3", system-ui, -apple-system, sans-serif;

  --t-titre-1:  clamp(44px, 2.4vw + 17px, 48px);  /* titre d'ouverture, fluide. Le clamp(48px, 3.2vw + 12px, 60px) demandé donne quatre lignes à 1280 et 1920 px dans une colonne de 6 : plafonné à 48px pour tenir sur trois lignes (72px dans la charte d'origine) */
  --t-titre-2:  32px;  /* titres de section (40px dans la charte d'origine, 32px le 2026-09-15) */
  --t-titre-3:  26px;  /* titres des cartes d'offre (34px dans la charte d'origine, 26px le 2026-09-15) */
  --t-exergue:  30px;  /* phrase mise en valeur d'À propos (38px dans la charte d'origine, 30px le 2026-09-15) */
  --t-numero:   56px;  /* numéros des quatre étapes (88px dans la charte d'origine, 56px le 2026-09-15) */
  --t-prix:     22px;  /* 30px dans la charte d'origine, 22px le 2026-09-15 : le prix reste sous les titres de carte */
  --t-telephone: 24px; /* numéro du contact (22px sur téléphone), ajouté le 2026-09-15 */
  --t-titre-4:  19px;  /* titres d'étape (21px dans la charte d'origine, 19px le 2026-09-15) */
  --t-intro:    21px;
  --t-corps:    19px;
  --t-corps-s:  17px;
  --t-petit:    16px;
  --t-mini:     14px;

  --graisse-normale: 400;
  --graisse-demi:    600;
  --graisse-forte:   700;

  --interligne-titre:   1.04;  /* 0.98 à 72px ; à 56px les lignes se touchaient, remonté à 1.04 */
  --interligne-titre-2: 1.10;
  --interligne-corps:   1.70;
  --interligne-serre:   1.55;

  /* Espacement des lettres des titres, desserré le 2026-09-18 : les lettres se
     touchaient, surtout dans les grands titres blancs des en-têtes. Anciennes
     valeurs : -0.030em, -0.035em, -0.030em et -0.050em. */
  --serrage-titre-1: -0.015em; /* titres d'ouverture */
  --serrage-titre-2: -0.012em; /* titres de section */
  --serrage-titre-3: -0.008em; /* titres de carte, exergue, prix, numéro de téléphone */
  --serrage-numero:  -0.02em;  /* grands chiffres des étapes */

  /* ---------- Espacements ---------- */
  --e-1:  4px;
  --e-2:  8px;
  --e-3: 16px;
  --e-4: 24px;
  --e-5: 32px;
  --e-6: 48px;
  --e-7: 64px;
  --e-8: 88px;

  --marge-section:  calc(var(--e-8) + var(--e-4));   /* 112px (88px dans la charte d'origine, aéré le 2026-09-15) */
  --marge-laterale: 48px;
  --gouttiere:      32px;

  /* ---------- Arrondis ---------- */
  --arrondi-photo:    28px;
  --arrondi-carte:    22px;
  --arrondi-bouton:    8px;
  --arrondi-pastille:  50%;

  /* ---------- Ombres des cartes ---------- */
  --ombre-carte:        0 1px 0 rgba(31, 46, 54, 0.10), 0 18px 40px rgba(23, 50, 61, 0.13);
  --ombre-carte-survol: 0 1px 0 rgba(31, 46, 54, 0.10), 0 28px 60px rgba(23, 50, 61, 0.18);
  --soulevement: -6px;

  /* ---------- Mise en page ---------- */
  --hauteur-entete:    84px;   /* en-tête collant ; 68px sur téléphone */
  --symbole-h:         22px;   /* hauteur du symbole de section (47 px de large depuis le symbole « le reflet », 64 × 30) */
  --largeur-contenu:   1120px;
  --largeur-texte:     62ch;
  --hauteur-ouverture: 680px;  /* n'est plus utilisée pour la photo depuis le 2026-09-15 (paysage par aspect-ratio) ; gardée en référence */
  --rupture-tel:       760px;  /* référence seulement : une variable ne peut pas servir dans une media query, la valeur est répétée en dur dans chaque @media */

  /* ---------- Mouvement (une seule animation, au chargement) ---------- */
  --duree-photo:  1000ms;
  --duree-titre:   850ms;
  --retard-titre:  140ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Téléphone (= --rupture-tel, 760px en dur) ---------- */
@media (max-width: 760px) {
  :root {
    --t-titre-1: 36px;  /* 40px dans la charte d'origine, ramené à 36px le 2026-09-15 */
    --t-titre-2: 26px;
    --t-titre-3: 22px;
    --t-exergue: 24px;
    --t-numero:  44px;
    --t-prix:    20px;
    --t-telephone: 22px;
    --t-titre-4: 18px;
    --t-intro:   18px;
    --t-corps:   17px;

    --marge-section:  calc(var(--e-5) + var(--e-4)); /* 56px (32px dans la charte d'origine) */
    --marge-laterale: 20px;
    --gouttiere:      24px;

    --arrondi-photo: 22px;
    --arrondi-carte: 20px;

    --hauteur-ouverture: 360px;
    --hauteur-entete: 68px;
  }
}

/* ==========================================================================
   Bases
   ========================================================================== */

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--interligne-corps);
}

.contenu {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding-inline: var(--marge-laterale);
}

h1 {
  font-size: var(--t-titre-1);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  letter-spacing: var(--serrage-titre-1);
  text-wrap: pretty;
}

h2 {
  font-size: var(--t-titre-2);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre-2);
  letter-spacing: var(--serrage-titre-2);
  text-wrap: pretty;
}

a { color: var(--texte); text-underline-offset: 5px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* ==========================================================================
   Boutons
   ========================================================================== */

.bouton {
  display: inline-block;
  font: var(--graisse-demi) 18px/1 var(--police);
  background: var(--accent);
  color: var(--sur-accent);
  padding: 18px 28px;
  border: 0;
  border-radius: var(--arrondi-bouton);
  text-decoration: none;
}
.bouton:hover  { background: var(--accent-survol); color: var(--sur-accent); }
.bouton:active { background: var(--accent-actif); }
.bouton:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

.bouton-secondaire {
  display: inline-block;
  font: var(--graisse-demi) var(--t-corps-s)/1 var(--police);
  background: transparent;
  color: var(--texte);
  padding: 14px 20px;
  border: 1px solid var(--texte);
  border-radius: var(--arrondi-bouton);
  text-decoration: none;
}
.bouton-secondaire:hover { background: var(--texte); color: var(--fond); }
.bouton-secondaire:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* Sur le fond sombre du contact, le bouton reste le bouton principal bordeaux
   (le bouton blanc .bouton-sur-sombre est annulé le 2026-09-15). Les règles
   .sombre a / .sombre a:hover sont plus précises que .bouton : on rétablit le
   texte blanc, et l'anneau de focus prend l'accent clair pour rester visible. */
.sombre .bouton { color: var(--sur-accent); }
.sombre .bouton:hover { color: var(--sur-accent); }
.sombre .bouton:focus-visible { outline-color: var(--accent-sur-sombre); }

/* ==========================================================================
   Cartes d'offre
   ========================================================================== */

.carte {
  background: var(--fond);
  border-radius: var(--arrondi-carte);
  padding: 44px 36px;
  box-shadow: var(--ombre-carte);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
/* Au survol, l'ombre seule : le soulèvement de --soulevement (-6px) faisait
   paraître l'autre carte plus basse pendant tout le survol (corrigé le 2026-09-15). */
.carte:hover {
  box-shadow: var(--ombre-carte-survol);
}
.carte .prix {
  margin-top: var(--e-3);           /* avec le row-gap de 16px : ~32px au-dessus du prix, dans les deux cartes */
  font-size: var(--t-prix);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--serrage-titre-3);
  line-height: 1.15;
  color: var(--accent);
}

/* ==========================================================================
   Section sombre : contact + pied de page d'un seul tenant
   ========================================================================== */

.sombre {
  position: relative;
  isolation: isolate;                  /* la grille de points (z-index négatif) reste au-dessus du fond et sous tout le reste */
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
  overflow: hidden;
}

/* ---------- Grille de points des fonds sombres : UNE SEULE définition ----------
   Points clairs de 1 px (blanc à 10 %), espacés de 26 px. La même règle sert aux
   trois en-têtes bleus (.ouv-hero, dont css/entetes.css n'ajoute que le fondu du
   bas) et au bloc sombre contact + pied de page (.sombre), sur toutes les pages :
   les réglages restent donc identiques. La grille passe sous les lignes de sonde
   et sous tous les contenus. */
.ouv-hero::before,
.sombre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--points-sombre) 1px, transparent 1.4px);
  background-size: var(--points-pas) var(--points-pas);
}
.sombre p { color: var(--texte-2-sur-sombre); }
.sombre a { color: var(--texte-sur-sombre); }
.sombre a:hover { color: var(--accent-sur-sombre); }
.sombre .pied {
  border-top: 1px solid var(--bordure-sombre);
  margin-top: var(--e-7);
  padding-top: var(--e-4);
  font-size: var(--t-petit);
  color: var(--texte-2-sur-sombre);
}
.sombre .pied a { color: var(--texte-2-sur-sombre); }
.sombre .pied a:hover { color: var(--texte-sur-sombre); }

.telephone {
  display: inline-block;
  font-size: var(--t-telephone); /* --t-titre-2 dans la charte d'origine, puis --t-prix, puis --t-telephone le 2026-09-15 */
  font-weight: var(--graisse-forte);
  letter-spacing: var(--serrage-titre-3);
  line-height: 1.1;
  text-decoration: none;
}

/* ==========================================================================
   Fonds de carte marine (fichiers séparés)
   ========================================================================== */

/* L'ouverture n'a plus de fond de sondes (décision du 2026-09-15) : .sondes-clair supprimé. */

/* Contact, sur fond sombre : le fond de lignes couvre la partie contact
   (.sombre-fond) et s'arrête avant le pied de page, qui reste sur le fond uni. */
.sombre-fond { position: relative; }
.sombre-fond::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/sondes-sombre.svg") center / cover no-repeat;
  pointer-events: none;
}
.sombre-fond > * { position: relative; }

/* ==========================================================================
   Les quatre étapes : route tracée par un point lumineux
   ========================================================================== */

/* La route est construite en CSS sur la grille des étapes : un trait (.etapes::before)
   qui court sur toute la largeur de la grille et s'estompe après la quatrième
   étape. Chaque étape porte un point de passage (.etape::before), dont le bord
   gauche est aligné sur le bord gauche de son chiffre.

   Animation (js/etapes.js), dans le style des en-têtes : quand la section entre
   à l'écran, un point lumineux (.etapes::after, en --accent, lueur douce et
   courte traînée) parcourt la route d'une étape à l'autre. À chaque passage le
   cercle se remplit, une petite onde s'éloigne, le chiffre et le titre quittent
   leur couleur atténuée. Après la quatrième étape la route finit de se tracer
   jusqu'au bout de la grille, le point reste allumé sur la quatrième étape.
   Une seule fois par affichage. La route pointillée du premier site est
   remplacée le 2026-09-18.

   Sans JavaScript, ou avec prefers-reduced-motion, l'état par défaut de cette
   feuille est l'état final : étapes allumées, route tracée, aucun mouvement. */

.etapes {
  list-style: none;                    /* la route est un <ol> */
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: var(--e-6);
  --route-point: 14px;                 /* diamètre du point de passage, contour compris */
  --route-espace: 26px;                /* distance entre la route et le haut du chiffre */
  --route-fondu-tel: 120px;            /* téléphone : longueur du fondu après le point 4 */
  --etapes-trace: 100%;                /* longueur tracée, pilotée par le script */
  --etapes-point: 0px;                 /* position du point lumineux, pilotée par le script */
}
/* la route tracée, en --fond-sombre (le bleu des en-têtes, touche ajoutée le 2026-09-18) ;
   après le point 4 elle s'estompe jusqu'au bord de la grille */
.etapes::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--route-point) / 2 - 1px);
  width: 100%;
  height: 2px;
  background: var(--fond-sombre);
  -webkit-mask-image: linear-gradient(to right, #000 calc(75% + var(--gouttiere) / 4), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(75% + var(--gouttiere) / 4), transparent 100%);
}
.etape {
  position: relative;
  padding-top: calc(var(--route-point) + var(--route-espace));
}
/* point de passage : allumé par défaut (état final), fond --fond-sombre et anneau --accent
   de 2 px ; l'onde (.etape::after) et le point lumineux restent en --accent */
.etape::before,
.etape::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--route-point);
  height: var(--route-point);
  border-radius: var(--arrondi-pastille);
  border: 2px solid var(--accent);
}
.etape::before { background: var(--fond-sombre); z-index: 1; transition: background-color 260ms var(--courbe), border-color 260ms var(--courbe); }
.etape::after { opacity: 0; pointer-events: none; }   /* l'onde, invisible hors animation */
.etape .numero, .etape h3 { transition: color 360ms var(--courbe), opacity 360ms var(--courbe); }

/* --- animation : états posés par js/etapes.js --- */
/* la partie de la route pas encore tracée : pointillé clair, de la première à la quatrième étape */
.etapes.attente:not(.fini) {
  background: repeating-linear-gradient(to right, var(--bordure) 0 6px, transparent 6px 12px) left calc(var(--route-point) / 2 - 1px) / calc(75% + var(--gouttiere) * 0.75) 2px no-repeat;
}
.etapes.attente::before { clip-path: inset(-4px calc(100% - var(--etapes-trace)) -4px 0); }
.etapes.attente.fini::before { clip-path: none; }
.etapes.attente .etape:not(.allumee)::before { background: var(--fond-section, var(--fond)); border-color: var(--accent-trace); }   /* se fond dans sa section, blanche ou non */
.etapes.attente .etape:not(.allumee) .numero,
.etapes.attente .etape:not(.allumee) h3 { color: var(--texte-2); opacity: 0.45; }
.etapes.attente .etape.allumee::after { animation: etape-onde 720ms var(--courbe) 1; }
@keyframes etape-onde {
  from { opacity: 0.55; transform: scale(1); }
  to   { opacity: 0; transform: scale(2.8); }
}
/* le point lumineux : une tête en --accent, une lueur douce, une courte traînée derrière */
.etapes::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: var(--etapes-point);
  top: calc(var(--route-point) / 2);
  width: 72px;
  height: 14px;
  margin: -7px 0 0 -65px;              /* la tête (à 7 px du bord droit) est posée sur la route */
  background:
    radial-gradient(circle at calc(100% - 7px) 50%, var(--accent) 0 4.5px, transparent 5.5px),
    linear-gradient(to right, transparent, var(--accent)) right 9px center / 0 3px no-repeat;   /* traînée : seulement en mouvement */
  filter: drop-shadow(0 0 5px var(--accent-lueur)) drop-shadow(0 0 12px var(--accent-lueur));
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--courbe), background-size 320ms var(--courbe);
}
.etapes.en-route::after { opacity: 1; }
.etapes.bouge::after { background-size: auto, calc(100% - 9px) 3px; }   /* à l'arrêt (première et quatrième étape) : pas de traînée, le point reste allumé */

@media (prefers-reduced-motion: reduce) {
  .etapes::after { display: none; }
  .etape::before, .etape .numero, .etape h3 { transition: none; }
}

.etape .numero {
  font-size: var(--t-numero);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--serrage-numero);
  line-height: 0.85;
  color: var(--accent);
}
.etape h3 {
  font-size: var(--t-titre-4);
  font-weight: var(--graisse-demi);
  margin: 0 0 var(--e-2);
}
.etape p {
  font-size: var(--t-petit);           /* 16px (--t-corps-s dans la charte d'origine) */
  line-height: 1.6;
  color: var(--texte-2);
  margin: 0;
}

/* Téléphone : les étapes passent l'une sous l'autre, la route devient
   verticale, à gauche, sur toute la hauteur de la liste ; chaque point est
   aligné sur le haut de son chiffre ; le point lumineux descend. */
@media (max-width: 760px) {
  .etapes { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-5); }
  .etapes::before {
    left: calc(var(--route-point) / 2 - 1px);
    top: 0;
    width: 2px;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--route-fondu-tel)), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--route-fondu-tel)), transparent 100%);
  }
  .etapes.attente:not(.fini) {   /* même pointillé clair, vertical, jusqu'à la quatrième étape */
    background: repeating-linear-gradient(to bottom, var(--bordure) 0 6px, transparent 6px 12px) calc(var(--route-point) / 2 - 1px) top / 2px calc(100% - var(--route-fondu-tel)) no-repeat;
  }
  .etapes.attente::before { clip-path: inset(0 -4px calc(100% - var(--etapes-trace)) -4px); }
  .etapes.attente.fini::before { clip-path: none; }
  .etape {
    padding-top: 0;
    padding-left: calc(var(--route-point) + var(--e-3));
  }
  .etape::before, .etape::after { top: 0; }  /* haut du point = haut du chiffre */
  .etapes::after {                           /* même point lumineux, tourné vers le bas */
    left: calc(var(--route-point) / 2);
    top: var(--etapes-point);
    transform-origin: calc(100% - 7px) 50%;
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Animation d'ouverture — la seule de la page
   ========================================================================== */

@keyframes apparition {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes photo-ouverture {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

.ouverture-photo {
  border-radius: var(--arrondi-photo);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;                 /* même ratio que l'original : aucun rognage, voilier entier (le 3/2 du correctif 2 est annulé) */
  object-fit: cover;
  object-position: 50% 50%;
  animation: photo-ouverture var(--duree-photo) var(--courbe) both;
}
.ouverture-texte {
  animation: apparition var(--duree-titre) var(--courbe) var(--retard-titre) both;
}

@media (prefers-reduced-motion: reduce) {
  .ouverture-photo,
  .ouverture-texte { animation: none; }
  .carte { transition: none; }
  .carte:hover { transform: none; }
}


/* ==========================================================================
   Composants du site (ajoutés à la charte — n'utilisent que ses variables)
   ========================================================================== */

/* ---------- Bases complémentaires ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3, p { margin: 0; }
h3 { font-size: var(--t-titre-4); font-weight: var(--graisse-demi); line-height: var(--interligne-titre-2); }
p + p { margin-top: var(--e-3); }

img { max-width: 100%; height: auto; display: block; }

.intro     { font-size: var(--t-intro);  line-height: var(--interligne-serre); }
.secondaire{ color: var(--texte-2); }
.petit     { font-size: var(--t-petit); }

/* Lien d'évitement pour le clavier */
.evitement {
  position: absolute;
  left: var(--e-3);
  top: calc(-1 * var(--e-8));
  background: var(--fond);
  color: var(--texte);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--arrondi-bouton);
  z-index: 3;
}
.evitement:focus { top: var(--e-3); }

/* ---------- Grille commune ----------
   Toute section plein écran contient un .contenu ; dans .contenu, la grille à
   12 colonnes place les blocs. Le bord gauche du contenu est le même partout :
   il est fixé par .contenu (max-width + padding-inline), jamais par la grille. */

.section { padding-block: var(--marge-section); }
.section-2 { background: var(--fond-2); --fond-section: var(--fond-2); }
.section-3 { background: var(--fond-3); --fond-section: var(--fond-3); }
/* --fond-section : le fond de la section, pour les éléments qui doivent s'y fondre
   (pastilles des étapes non allumées). Sans valeur, c'est le blanc de la page. */

.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: var(--e-6);
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.titre-section { margin-bottom: var(--e-6); }
.titre-section p { margin-top: var(--e-3); max-width: var(--largeur-texte); }

/* ---------- En-tête ---------- */

.entete {
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 5;
  transition: box-shadow 200ms var(--courbe);
}
.entete.ombre { box-shadow: 0 1px 0 var(--bordure), 0 4px 12px rgba(23, 50, 61, 0.06); } /* ombre très légère ; rgba(23,50,61,…) est la base des ombres de la charte */
.entete-sentinelle { height: 1px; margin-bottom: -1px; }   /* repère invisible au-dessus de l'en-tête */
.entete .contenu {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: var(--hauteur-entete);
}
/* Les ancres ne passent pas sous l'en-tête collant */
[id] { scroll-margin-top: calc(var(--hauteur-entete) + var(--e-4)); }
@media (prefers-reduced-motion: reduce) { .entete { transition: none; } }
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-titre-4);
  font-weight: var(--graisse-normale);   /* « Horizon » en graisse normale */
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  color: var(--texte);
}
.logo strong { font-weight: var(--graisse-forte); } /* « Archipel » en graisse forte */
.logo-symbole { width: 60px; height: 28px; color: var(--accent); flex: none; } /* symbole « le reflet », 64 × 30 : même hauteur qu'avant, largeur suivant le dessin */
.logo:hover { color: var(--texte); }
.logo:hover .logo-symbole { color: var(--accent-survol); }

.menu { display: flex; align-items: center; gap: var(--e-5); margin-left: auto; }
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--e-4);
}
.menu a:not(.bouton) {
  position: relative;
  display: inline-block;
  padding: var(--e-2) 0;
  font-size: var(--t-corps-s);
  font-weight: var(--graisse-demi);
  text-decoration: none;
  white-space: nowrap;
}
/* Trait de survol : se dessine de gauche à droite ; permanent sur la page courante */
.menu a:not(.bouton)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--courbe);
}
.menu a:not(.bouton):hover::after,
.menu a:not(.bouton):focus-visible::after,
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a:not(.bouton):hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .menu a:not(.bouton)::after { transition: none; }
}
.menu .bouton { padding: 12px 20px; font-size: var(--t-corps-s); }

.menu-bouton {
  display: none;
  margin-left: auto;
  font: var(--graisse-demi) var(--t-corps-s)/1 var(--police);
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--texte);
  border-radius: var(--arrondi-bouton);
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
}
.menu-bouton:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* Menu en bouton sous 1100 px (760 px jusqu'au 2026-09-18) : entre 761 et 1100 px, le menu
   déployé ne tenait pas à côté du logo et débordait de la page. */
@media (max-width: 1100px) {
  .entete .contenu { flex-wrap: wrap; gap: var(--e-3); }
  .menu-bouton { display: inline-block; }
  .menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding-block: var(--e-3) var(--e-4);
    gap: var(--e-3);
  }
  .menu[data-ouvert="oui"] { display: flex; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a:not(.bouton) {
    display: block;
    padding: var(--e-3) 0;
    min-height: 44px;
    border-bottom: 1px solid var(--bordure);
  }
  .menu a:not(.bouton)::after { right: auto; width: 120px; }
  .menu .bouton { text-align: center; min-height: 44px; line-height: 20px; } /* cible tactile : mesuré 41 px sans cette règle */
}

/* ---------- Ouverture : photo à gauche, titre et texte à droite ---------- */

/* Ouverture plein écran : au moins la hauteur visible moins l'en-tête,
   contenu centré verticalement. Sur téléphone, pas de hauteur minimale. */
/* Ouverture à hauteur naturelle (le plein écran est annulé le 2026-09-15) :
   marges confortables en haut et en bas, un peu plus en bas pour laisser les
   lignes de sonde sous le contenu. */
.ouverture { padding-block: var(--e-8) calc(var(--e-8) + 48px); }
/* Photo et bloc de texte à moitié-moitié (6/6), centrés l'un sur l'autre.
   À 1280 px la photo en 4/3 fait ~387 px de haut ; le bloc de texte, avec le
   titre à 48px sur trois lignes, reste en dessous de cette hauteur. */
.ouverture .grille { align-items: center; }
.ouverture-texte h1 { margin-bottom: var(--e-3); }
.ouverture-texte .intro { max-width: var(--largeur-texte); }
.ouverture-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-4);
  margin-top: var(--e-5);
}
.surtitre {
  display: block;
  font-size: var(--t-petit);
  font-weight: var(--graisse-demi);
  color: var(--accent);
  margin-bottom: var(--e-3);
}

@media (max-width: 760px) {
  .ouverture { padding-block: var(--e-5); }
  .ouverture-photo { order: -1; }
}

/* ---------- Deux cartes d'offre sur une grille commune ----------
   Les deux cartes partagent les six rangées de la grille parente (subgrid) :
   titre / statut / texte / prix principal / détails du prix / bouton. Chaque
   rangée démarre donc à la même hauteur dans les deux cartes ; la rangée
   statut, vide sur la carte automatisation, garde la hauteur de l'autre.
   Sans subgrid (navigateur ancien), chaque carte reste une grille à rangées
   automatiques : le contenu s'affiche, sans l'alignement croisé. */

.offres .grille { grid-template-rows: repeat(6, auto); }
.offres .carte {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 6;
  row-gap: var(--e-4);
  align-content: start;
}
.carte h3 {
  font-size: var(--t-titre-3);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--serrage-titre-3);
  line-height: var(--interligne-titre-2);
  margin: 0;
}
.carte .etat {
  display: block;
  font-size: var(--t-petit);
  font-weight: var(--graisse-demi);
  color: var(--accent);
  margin: 0;
}
.carte p { color: var(--texte-2); font-size: var(--t-corps-s); }
.carte-texte p + p { margin-top: var(--e-4); }
.carte .prix-details { align-self: start; }
.carte .prix-detail { font-size: var(--t-corps-s); color: var(--texte-2); font-weight: var(--graisse-normale); line-height: var(--interligne-serre); }
.carte .prix-detail + .prix-detail { margin-top: var(--e-1); }
.carte .bouton-secondaire { align-self: end; justify-self: start; margin-top: var(--e-2); }

@media (max-width: 760px) {
  .carte { padding: var(--e-5) var(--e-4); }
  /* L'une sous l'autre, chacune dans son ordre naturel. */
  .offres .grille { grid-template-rows: none; }
  .offres .carte {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    gap: var(--e-4);
  }
  .carte .bouton-secondaire { align-self: flex-start; }
}

/* ---------- À propos : exergue à gauche, paragraphes à droite ---------- */

.exergue {
  font-size: var(--t-exergue);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre-2);
  letter-spacing: var(--serrage-titre-3);
  color: var(--accent);
  text-wrap: pretty;
}
.a-propos .grille { align-items: start; }
.a-propos .nom {
  font-size: var(--t-corps-s);
  color: var(--texte-2);
  margin-top: var(--e-4);
}
.a-propos h2.exergue { margin: 0; }
/* Photo du voilier, sous l'exergue et le nom (ajoutée le 2026-09-18) : arrondie comme
   la photo d'ouverture du premier site, ratio 4/3, légende en texte secondaire.
   Sur téléphone la colonne s'empile : la photo passe sous l'exergue, pleine largeur. */
.apropos-photo { margin: var(--e-5) 0 0; }
@media (min-width: 761px) { .apropos-photo { max-width: 360px; } }   /* la colonne de gauche ne dépasse pas celle de droite de plus de 20 % */
.apropos-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--arrondi-photo); }

/* ---------- Contact sombre + pied de page ---------- */

.sombre-fond.section { padding-block: var(--marge-section); }
.titre-contact {
  font-size: var(--t-titre-3);
  letter-spacing: var(--serrage-titre-3);
  margin-bottom: var(--e-3);
}
/* Ordinateur : la colonne de droite est calée sur le bord droit de la grille ;
   téléphone : tout revient à gauche. */
/* Colonne de droite calée sur le bord droit de la grille (l'alignement à gauche
   du correctif précédent est annulé) ; le numéro vient en premier, son haut
   coïncide avec le haut du titre. Sur téléphone, tout revient à gauche. */
.contact-coordonnees { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: var(--e-4); }
@media (max-width: 760px) {
  .contact-coordonnees { align-items: flex-start; text-align: left; }
}
.contact-coordonnees .telephone { line-height: var(--interligne-titre-2); }
.contact-coordonnees p { margin: 0; }
.contact-coordonnees .action { margin: 0; }
.sombre .pied {
  margin-top: 0;
  padding-block: var(--e-4) var(--e-5);
  font-size: var(--t-corps-s);   /* --t-petit dans la charte d'origine */
}
/* Pied en deux colonnes sur ordinateur : identité à gauche, liens calés à droite */
.pied { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gouttiere); align-items: end; }
.pied p { margin: 0; color: var(--texte-2-sur-sombre); }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2) var(--e-5); text-align: right; }
@media (max-width: 760px) {
  .pied { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-3); }
  .pied-liens { justify-content: flex-start; text-align: left; }
}

/* ---------- Pages intérieures : titre de page ---------- */

.titre-page { padding-block: var(--e-7) var(--e-6); border-bottom: 1px solid var(--bordure); }
.titre-page h1 {
  font-size: var(--t-titre-2);
  letter-spacing: var(--serrage-titre-2);
  line-height: var(--interligne-titre-2);
  max-width: 24ch;
}
.titre-page .intro { max-width: var(--largeur-texte); margin-top: var(--e-4); }

/* ---------- Liste de points (sans puces décoratives) ---------- */

.points {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--largeur-texte);
}
.points li {
  padding: var(--e-4) 0;
  border-top: 1px solid var(--bordure);
}
.points li:last-child { border-bottom: 1px solid var(--bordure); }
.points strong { display: block; font-weight: var(--graisse-demi); margin-bottom: var(--e-1); }
.points p { color: var(--texte-2); font-size: var(--t-corps-s); }

/* ---------- Tableau de prix en lignes ---------- */

.prix-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--bordure-forte);
  max-width: var(--largeur-texte);
}
.prix-lignes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--gouttiere);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--bordure);
}
.prix-lignes .libelle { color: var(--texte-2); font-size: var(--t-corps-s); padding-top: 2px; }
.prix-lignes .valeur  { font-weight: var(--graisse-demi); }
.prix-lignes .valeur .prix { font-size: var(--t-prix); font-weight: var(--graisse-forte); color: var(--accent); letter-spacing: var(--serrage-titre-3); line-height: 1.15; }
.prix-lignes .valeur small { display: block; font-weight: var(--graisse-normale); font-size: var(--t-petit); color: var(--texte-2); margin-top: var(--e-1); }

@media (max-width: 760px) {
  .prix-lignes li { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-1); }
}

/* ---------- Encadré « exemple de calcul » ---------- */

.encadre-apres { margin-top: var(--e-6); }
.encadre {
  background: var(--fond-3);
  border-radius: var(--arrondi-carte);
  padding: var(--e-5);
  max-width: var(--largeur-texte);
}
.encadre h3, .encadre h4 { font-size: var(--t-titre-4); font-weight: var(--graisse-demi); margin: 0 0 var(--e-2); }
.encadre .note { font-size: var(--t-petit); color: var(--texte-2); margin-bottom: var(--e-3); }
.encadre ul { margin: var(--e-3) 0 0; padding-left: 1.2em; }
.encadre li + li { margin-top: var(--e-1); }

/* ---------- Questions fréquentes ---------- */

.faq { max-width: var(--largeur-texte); border-top: 1px solid var(--bordure); }
.faq details { border-bottom: 1px solid var(--bordure); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-4);
  padding: var(--e-5) 0;
  font-size: var(--t-intro);
  font-weight: var(--graisse-demi);
  line-height: var(--interligne-serre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-weight: var(--graisse-normale);
  color: var(--accent);
  width: 1em;
  text-align: center;
}
.faq details[open] summary::after { content: "\2212"; } /* signe moins */
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
.faq details[open] summary { padding-bottom: var(--e-4); }   /* --e-4 sous la question quand la réponse est ouverte */
.faq .reponse { padding: 0 0 var(--e-5); color: var(--texte-2); max-width: 56ch; }

/* ---------- Page de texte long (mentions légales) ---------- */

.texte-long { max-width: var(--largeur-texte); }
.texte-long h2 { font-size: var(--t-titre-3); margin: var(--e-7) 0 var(--e-3); }
.texte-long h2.premier { margin-top: 0; }
.texte-long h3 { margin: var(--e-5) 0 var(--e-2); }
.texte-long p, .texte-long li { font-size: var(--t-corps-s); }
.texte-long ul { padding-left: 1.2em; }
.texte-long table { width: 100%; border-collapse: collapse; font-size: var(--t-petit); margin: var(--e-3) 0; }
.texte-long th, .texte-long td { text-align: left; vertical-align: top; padding: var(--e-2) var(--e-3) var(--e-2) 0; border-bottom: 1px solid var(--bordure); }
.texte-long th { font-weight: var(--graisse-demi); border-bottom-color: var(--bordure-forte); }
.texte-long address { font-style: normal; }
.defilement { overflow-x: auto; }

/* ---------- Téléphone : la grille s'empile ---------- */

@media (max-width: 760px) {
  .grille { row-gap: var(--e-5); }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .titre-section { margin-bottom: var(--e-5); }
  .texte-long h2 { margin-top: var(--e-6); }
}

/* ---------- Pages intérieures : compléments (paquet 3) ---------- */
.texte-suite { margin-top: var(--e-6); }
.texte-suite h3 { margin-bottom: var(--e-2); }
.texte-suite p { max-width: var(--largeur-texte); }
.action-section { margin-top: var(--e-6); }
.titre-page .ouverture-actions { margin-top: var(--e-5); }
.titre-page .intro + .intro { margin-top: var(--e-3); }

/* ==========================================================================
   Page restaurant (paquet 3 bis) — règles réutilisables par la page automatisation
   ========================================================================== */

/* ---------- Ouverture de page intérieure : texte 6 / illustration 6 ---------- */
.ouverture-page .ouverture-texte .surtitre { margin-bottom: var(--e-3); }
.ouverture-page .intro + .intro { margin-top: var(--e-3); }

/* ---------- Téléphone dessiné : cadre, en-tête, fil de bulles ---------- */
.telephone-dessin { margin: 0; display: flex; flex-direction: column; align-items: center; }
.telephone-dessin figcaption { margin-top: var(--e-3); font-size: var(--t-petit); color: var(--texte-2); }
.tel-cadre {
  width: 100%;
  max-width: 360px;
  height: 491px;                       /* hauteur commune des illustrations d'ouverture (téléphone dessiné à 1280 px) */
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border: 2px solid var(--bordure-forte);
  border-radius: var(--arrondi-photo);
  padding: var(--e-3);
  box-shadow: var(--ombre-carte);
}
.tel-entete {
  text-align: center;
  font-weight: var(--graisse-demi);
  font-size: var(--t-corps-s);
  padding: var(--e-2) 0 var(--e-3);
  border-bottom: 1px solid var(--bordure);
  margin-bottom: var(--e-3);
}
.tel-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.bulle {
  max-width: 85%;
  padding: var(--e-2) var(--e-3);
  border-radius: 16px;
  font-size: var(--t-petit);
  line-height: var(--interligne-serre);
}
.bulle.client { align-self: flex-start; background: var(--fond-2); border-bottom-left-radius: 4px; }
.bulle.assistant {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 10%, var(--fond)); /* teinte claire de l'accent, sans nouvelle couleur */
  border-bottom-right-radius: 4px;
}
/* Apparition des bulles l'une après l'autre (état par défaut : toutes visibles) */
.telephone-dessin.attente .bulle { opacity: 0; transform: translateY(8px); }
.telephone-dessin.anim .bulle { opacity: 1; transform: none; transition: opacity 320ms var(--courbe), transform 320ms var(--courbe); }
.telephone-dessin.anim .bulle:nth-child(1) { transition-delay: 0ms; }
.telephone-dessin.anim .bulle:nth-child(2) { transition-delay: 400ms; }
.telephone-dessin.anim .bulle:nth-child(3) { transition-delay: 800ms; }
.telephone-dessin.anim .bulle:nth-child(4) { transition-delay: 1200ms; }
.telephone-dessin.anim .bulle:nth-child(5) { transition-delay: 1600ms; }
@media (prefers-reduced-motion: reduce) {
  .telephone-dessin.attente .bulle, .telephone-dessin.anim .bulle { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 760px) {
  .telephone-dessin { order: 2; margin-top: var(--e-4); }
  .tel-cadre { max-width: 320px; height: 541px; }   /* hauteur du téléphone dessiné à 390 px */
}

/* ---------- Grille de points : 3 colonnes, 2 entre 761 et 1024 px, 1 sur téléphone ---------- */
.grille-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: var(--e-6);
}
.grille-points li { border-top: 2px dashed var(--accent-trace); padding-top: var(--e-4); }
.grille-points h3 { font-size: var(--t-titre-4); font-weight: var(--graisse-demi); margin: 0 0 var(--e-3); }
.grille-points p { font-size: var(--t-corps-s); line-height: 1.6; color: var(--texte-2); }
/* Ligne de conclusion sous une grille de points : toute la largeur du contenu, en --t-corps */
.grille-points-suite { margin-top: var(--e-6); color: var(--texte-2); }
@media (min-width: 761px) and (max-width: 1024px) {
  .grille-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grille-points { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-5); }
}

/* ---------- Sections en deux colonnes : titre à gauche, texte à droite ---------- */
.texte-courant p { font-size: var(--t-corps); }
.texte-courant p + p { margin-top: var(--e-3); }
.texte-courant h3 { margin: var(--e-5) 0 var(--e-2); }
.grille .col-5 h2 { margin: 0; }
@media (min-width: 761px) {
  .colle { position: sticky; top: var(--e-4); }
}

/* ---------- Sections prix : texte sur 6 colonnes, une colonne vide, carte sur 5 ----------
   La carte est calée sur le bord droit de la grille (colonnes 8 à 12) ; la
   colonne 7 reste vide. Sur téléphone, .col-5 reprend ses 12 colonnes. */
@media (min-width: 761px) {
  .col-5.cale-droite { grid-column: 8 / -1; }
}

/* ---------- Carte de prix, collée au défilement sur ordinateur ---------- */
.carte-tarif { padding: var(--e-5) var(--e-4); }
.carte-tarif:hover { box-shadow: var(--ombre-carte); }
.carte-tarif .prix-lignes { max-width: none; }
.carte-tarif .prix-lignes li { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-2); }
.carte-tarif .prix-lignes .valeur .prix { font-size: var(--t-prix); margin-top: 0; }
/* Montant secondaire d'une carte de prix : pas en accent */
.prix-lignes .valeur .prix-secondaire { display: block; font-size: var(--t-titre-4); font-weight: var(--graisse-demi); color: var(--texte); line-height: var(--interligne-titre-2); }
.carte-tarif-action { margin: var(--e-4) 0 0; }
.carte-tarif-action .bouton { display: block; text-align: center; }
.texte-courant .intro { font-size: var(--t-intro); margin-top: var(--e-3); }
/* ligne de précision sous le texte d'une section à deux colonnes (« Votre liste vous appartient… ») */
.texte-courant p.note-section { font-size: var(--t-corps-s); color: var(--texte-2); }
.texte-courant .encadre { max-width: none; }

/* ---------- Questions fréquentes sur toute la colonne de droite ---------- */
.faq-large { max-width: none; }
.faq-large .reponse { max-width: none; }
/* Questions à droite d'un titre + chapeau : pas de trait au-dessus de la
   première question ; la colonne descend de la rangée du symbole, moins ce
   qu'il faut pour que la première ligne de la première question ait le même
   milieu vertical que la première ligne du titre (padding --e-5 et interligne
   serré de la question, interligne de titre du h2). */
@media (min-width: 761px) {
  .faq-large {
    border-top: 0;
    margin-top: calc(var(--symbole-h) + var(--e-3) + (var(--t-titre-2) * var(--interligne-titre-2)) / 2 - var(--e-5) - (var(--t-intro) * var(--interligne-serre)) / 2);
  }
}


/* ---------- En-tête de section : symbole, titre à gauche (5), chapeau à droite (7) ---------- */
.en-tete-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  align-items: start;
  margin-bottom: var(--e-6);
}
/* Le symbole occupe sa propre rangée, au-dessus du titre et du chapeau ;
   les deux démarrent donc sur la même ligne. */
.en-tete-section > .symbole { grid-column: 1 / -1; }
.en-tete-titre { grid-column: span 5; }
.en-tete-titre h2, .en-tete-titre .exergue { margin: 0; }
.symbole { display: block; width: 47px; height: var(--symbole-h); color: var(--accent); margin-bottom: var(--e-3); }
.chapeau-droite { text-align: right; }   /* étapes : bord droit du chapeau sur le bord droit de la route */
.chapeau {
  grid-column: span 7;
  margin: 0;
  font-size: var(--t-intro);
  line-height: var(--interligne-serre);
  color: var(--texte-2);
}
/* Sections en deux colonnes (titre à gauche, texte à droite) : pas de symbole,
   le haut du titre est aligné sur le haut du premier paragraphe. */
@media (max-width: 760px) {
  .en-tete-section { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-3); margin-bottom: var(--e-5); }
  .en-tete-titre, .chapeau, .en-tete-section > .symbole { grid-column: span 1; }
  .chapeau { line-height: var(--interligne-serre); }
  .chapeau-droite { text-align: left; }
}

.chapeau-colonne { grid-column: auto; margin-top: var(--e-3); }   /* pleine largeur de la colonne : un chapeau court tient sur une ligne */

/* ---------- Page restaurant : fonds et filet ---------- */
.section-2 .encadre { background: var(--fond); }          /* encadré blanc sur fond gris-bleu */
.section-filet { border-top: 1px solid var(--bordure); }  /* questions séparées des frais par un filet */

/* ---------- À propos : paragraphes en corps courant ---------- */
.a-propos .col-7 p { font-size: var(--t-corps); }

/* ---------- Séparateur en ligne de sonde entre deux fonds ----------
   Le fichier SVG sert de masque : ::after est rempli de la couleur de la
   section qui suit, ::before, décalé d'un pixel et demi vers le haut, laisse
   dépasser une ligne fine qui suit la courbe. Le fond de l'élément est celui
   de la section qui précède. Deux par page au plus. */
.separateur {
  position: relative;
  height: 40px;
  overflow: hidden;
  background: var(--fond);
  --separateur-vers: var(--fond-2);
  --separateur-ligne: var(--sonde-clair);
}
.separateur::before, .separateur::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("../img/separateur-sonde.svg") center / 100% 100% no-repeat;
          mask: url("../img/separateur-sonde.svg") center / 100% 100% no-repeat;
}
.separateur::before { background: var(--separateur-ligne); transform: translateY(-1.5px); }
.separateur::after  { background: var(--separateur-vers); }
.separateur-vers-sombre { --separateur-vers: var(--fond-sombre); --separateur-ligne: var(--sonde-sombre); }
.separateur-depuis-fond-3 { background: var(--fond-3); }
.separateur-depuis-fond-2 { background: var(--fond-2); }
@media (max-width: 760px) { .separateur { height: 24px; } }

/* ---------- Ouverture : lignes de sonde dans le quart bas, sous la photo et les boutons ---------- */
.ouverture { position: relative; overflow: hidden; }
.ouverture > .contenu { position: relative; z-index: 1; }
.ouverture-sondes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 112px;                       /* sous le contenu : la marge basse fait --e-8 + 48px */
  color: var(--sonde-clair);
  pointer-events: none;
}
@media (max-width: 760px) {
  .ouverture { padding-bottom: var(--e-8); }
  .ouverture-sondes { height: 56px; }
  .sonde-tel-cache { display: none; }
}

/* ---------- Légende de la photo d'ouverture ---------- */
.ouverture-photo-cadre { margin: 0; }
.legende { margin-top: var(--e-2); font-size: var(--t-petit); color: var(--texte-2); }

/* ---------- Pied de page : symbole et lieu ---------- */
.symbole-pied { width: 73px; height: 34px; color: var(--accent-sur-sombre); margin: 0 0 var(--e-3); }
.pied-lieu { font-size: var(--t-mini); margin-top: var(--e-1); }

/* ---------- Sélection de texte ---------- */
::selection { background: color-mix(in srgb, var(--accent) 18%, var(--fond)); color: var(--texte); }
.sombre ::selection { background: var(--accent-sur-sombre); color: var(--fond-sombre); }

/* ---------- Page automatisation : exemple de tâche automatisée (même style que le téléphone dessiné) ---------- */
.suivi-dessin { margin: 0; display: flex; flex-direction: column; align-items: center; }
.suivi-dessin figcaption { margin-top: var(--e-3); font-size: var(--t-petit); color: var(--texte-2); }
/* .suivi-cadre reprend le gabarit de .tel-cadre (largeur, bordure, rayon, ombre) : rien à redéfinir */
.suivi-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; justify-content: space-evenly; } /* les lignes se répartissent dans la hauteur commune */
.suivi-ligne {
  display: grid;
  grid-template-columns: 3.2em 14px minmax(0, 1fr);
  column-gap: var(--e-2);
  align-items: start;                  /* le texte peut passer sur deux lignes dans la largeur du téléphone */
  padding: var(--e-2) 0;
  border-top: 1px solid var(--bordure);
  font-size: var(--t-petit);
  line-height: var(--interligne-serre);
}
.suivi-ligne:first-child { border-top: 0; }
.suivi-heure { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.pastille { width: 10px; height: 10px; margin-top: 0.45em; border-radius: var(--arrondi-pastille); border: 2px solid var(--accent); background: var(--fond); }
.pastille-relance { background: color-mix(in srgb, var(--accent) 35%, var(--fond)); }
.pastille-repondu, .pastille-prevenu { background: var(--accent); }
/* Apparition des lignes l'une après l'autre (état par défaut : toutes visibles) */
.suivi-dessin.attente .suivi-ligne { opacity: 0; transform: translateY(6px); }
.suivi-dessin.anim .suivi-ligne { opacity: 1; transform: none; transition: opacity 320ms var(--courbe), transform 320ms var(--courbe); }
.suivi-dessin.anim .suivi-ligne:nth-child(1) { transition-delay: 0ms; }
.suivi-dessin.anim .suivi-ligne:nth-child(2) { transition-delay: 400ms; }
.suivi-dessin.anim .suivi-ligne:nth-child(3) { transition-delay: 800ms; }
.suivi-dessin.anim .suivi-ligne:nth-child(4) { transition-delay: 1200ms; }
.suivi-dessin.anim .suivi-ligne:nth-child(5) { transition-delay: 1600ms; }
.suivi-dessin.anim .suivi-ligne:nth-child(6) { transition-delay: 2000ms; }
@media (prefers-reduced-motion: reduce) {
  .suivi-dessin.attente .suivi-ligne, .suivi-dessin.anim .suivi-ligne { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 760px) {
  .suivi-dessin { order: 2; margin-top: var(--e-4); }
}
/* Carte de prix : note sous les lignes */
.carte-tarif-note { margin: var(--e-4) 0 0; font-size: var(--t-corps-s); font-weight: var(--graisse-demi); }

/* ---------- Page restaurant : colonnes du prix de même hauteur ----------
   L'encadré est poussé en bas de la colonne de gauche et la carte prend
   toute la hauteur de la colonne de droite : leurs bas coïncident. La carte
   n'est plus collée au défilement sur cette page. */
@media (min-width: 761px) {
  .prix-aligne .texte-courant { display: flex; flex-direction: column; }
  .prix-aligne .encadre-apres { margin-top: auto; }
  .prix-aligne .texte-courant > p:last-of-type { margin-bottom: var(--e-6); }
  .prix-aligne .carte-tarif { height: 100%; }
}