@import url("assets/brand.css");

/* ==========================================================================
   AU BOUT DE LA LONGE — feuille de style du site définitif
   --------------------------------------------------------------------------
   Ce site est le montage retenu à partir des trois maquettes :
     · navigation, prestations, tarifs, balade, valeurs ......... maquette A
     · accroche d'accueil ....................................... maquette B
     · en-tête, parcours « quel est votre besoin ? », FAQ,
       « on en parle » et pied de page .......................... maquette C
   Chaque bloc ci-dessous porte en commentaire sa maquette d'origine et,
   quand il a fallu l'adapter, la raison de l'écart.
   Mobile first, zéro JavaScript.
   ========================================================================== */

body {
  margin: 0;
  font-family: var(--f-corps);
  color: var(--texte);
  background: var(--bg);
  line-height: 1.65;
  padding-bottom: 68px;            /* place pour la barre d'action mobile (A) */
  overflow-x: hidden;
}
.wrap { width: min(100% - (var(--gouttiere) * 2), var(--maxw)); margin-inline: auto; }
.wrap--etroit { width: min(100% - (var(--gouttiere) * 2), 820px); margin-inline: auto; }
section { padding-block: var(--section); }
h1, h2, h3 { font-family: var(--f-titre); color: var(--titre); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p + p { margin-top: .85em; }

.chapeau { color: var(--c-texte-doux); max-width: var(--maxw-texte); margin-top: .75rem; }
.lead { font-size: 1.1rem; color: var(--c-texte-doux); max-width: var(--maxw-texte); }

/* Surtitre en capitales (C) : il annonce le sujet de la section avant le titre. */
.surtitre {
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: .9rem;
  display: flex; align-items: center; gap: .6rem;
}

/* Titre de section avec filet (A) */
.titre-sec { margin-bottom: 2.5rem; }
.titre-sec::after {
  content: ""; display: block; width: 72px; height: 2px;
  background: var(--accent); margin-top: 1rem;
}
.titre-sec--centre { text-align: center; }
.titre-sec--centre::after { margin-inline: auto; }
.titre-sec--centre .chapeau { margin-inline: auto; }

/* --- Boutons (A) ---------------------------------------------------------
   Les trois maquettes n'avaient pas le même bouton : pilule bleue en A et B,
   rectangle brun en C. Le site n'en garde qu'un — celui de A — pour que le
   même geste ait partout la même forme. Les variantes --clair et --contour
   de C restent définies : elles servent sur les fonds bleus. */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 2px solid var(--cta-bg);
  background: var(--cta-bg); color: var(--cta-texte); text-align: center;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--c-bleu-fonce); border-color: var(--c-bleu-fonce); }
.btn--ghost { background: transparent; color: var(--titre); }
.btn--ghost:hover { background: var(--titre); color: var(--cta-texte); }
.btn--clair { background: var(--c-blanc); border-color: var(--c-blanc); color: var(--titre); }
.btn--clair:hover { background: var(--bg-alt); border-color: var(--bg-alt); color: var(--titre); }
.btn--contour { background: transparent; border-color: var(--c-brun-clair); color: var(--c-blanc); }
.btn--contour:hover { background: var(--c-brun-clair); color: var(--c-blanc); }

/* ==========================================================================
   EN-TÊTE — structure de la maquette C (marque + bouton de prise de RDV),
   fond de la maquette A (bandeau sable translucide, collant en haut).
   La navigation par ancres de A est intercalée entre les deux : le site se
   parcourt d'une seule page, il lui faut son menu.
   ========================================================================== */
.entete {
  position: sticky; top: 0; z-index: 20;
  /* Le bandeau prend la couleur du bloc d'accueil qu'il surplombe, et non
     celle du body : les deux sables de la charte sont assez proches pour que
     la difference se lise comme un defaut de raccord plutot que comme une
     intention. Le bandeau et l'accueil partageant desormais la meme couleur,
     c'est le lisere qui marque la limite : il est dans le brun de la charte,
     assez present pour detacher l'en-tete, assez discret pour ne pas barrer
     la page. */
  background: var(--bg-alt); border-bottom: 1px solid var(--c-ligne);
}
.entete__in { display: flex; align-items: center; gap: 1rem; padding-block: .6rem; }
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marque img { width: 54px; }
.marque b { font-family: var(--f-titre); color: var(--titre); font-size: 1.05rem; display: block; }
.marque span { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
/* Le bouton de l'en-tête est plus compact que ceux du corps de page.
   Sous 620 px il disparaît : la marque et lui ne tiennent pas sur une ligne,
   et la barre d'action fixe du bas porte déjà « Réserver ». */
.entete .btn { display: none; padding: .6rem 1.2rem; font-size: .92rem; }
@media (min-width: 620px) { .entete .btn { display: inline-flex; } }

.nav { display: none; gap: 1.15rem; align-items: center; }
.nav a { color: var(--texte); text-decoration: none; font-size: .92rem; white-space: nowrap; }
.nav a:hover { color: var(--titre); }

/* ==========================================================================
   ACCROCHE D'ACCUEIL — maquette B (titre, citation encadrée, présentation),
   complétée par les trois repères de la maquette C (éducation non coercitive,
   tous les profils, disponibilités).
   ========================================================================== */
.accroche { background: var(--bg-alt); padding: 0; }
/* Le bandeau (fond sable) reste bord à bord ; la grille texte/photo qu'il
   contient, elle, est plafonnée à --maxw et centrée, sinon sur un écran très
   large le texte reste cale sur la gouttiere du contenu pendant que la photo
   continue de courir jusqu'au bord de l'ecran : l'ensemble parait decentre. */
.accroche__in { display: grid; max-width: var(--maxw); margin-inline: auto; }
.accroche__texte { padding: clamp(2.5rem, 6vw, 5rem) var(--gouttiere); }
/* Titre centré tant que la section tient sur une seule colonne (mobile) ;
   repasse à gauche dès que la photo se met à côté (desktop, 1000px). */
.accroche h1 { text-align: center; }
/* Sur mobile la photo est le dernier element de la section, bord a bord :
   sans marge, elle touche directement la section suivante. Le bord a bord
   du desktop (plus bas) n'a pas ce probleme, la colonne photo egalant la
   colonne de texte en hauteur. */
.accroche__media { display: grid; margin-bottom: 2rem; }
/* Sur mobile la photo passe sous le texte : sans rapport imposé, un portrait
   pris au téléphone occuperait tout l'écran avant la première ligne lue. */
.accroche__media > .ph--plein { aspect-ratio: 5 / 4; height: auto; max-height: min(46vh, 400px); }
.citation {
  font-family: var(--f-citation); font-style: italic; color: var(--accent);
  border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.2rem 0;
}
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; justify-content: center; }

/* Renvoi vers les CGV sous les boutons de réservation : l'information
   précontractuelle doit être accessible avant l'engagement, pas seulement
   depuis le pied de page. Hérite de la couleur du bloc qui l'accueille. */
.mention-cgv { margin-top: .8rem; font-size: .85rem; opacity: .8; }
/* Sous les boutons d'accueil (maintenant centres), la mention suit : centree
   sur mobile, revient a gauche au passage en deux colonnes desktop. Celle de
   « On en parle » n'a pas besoin de cette regle : elle herite deja du
   centrage/alignement de .contact__in. */
.accroche__texte .mention-cgv { text-align: center; }

/* Repères repris de C. En C ils vivaient sur le bleu du héros ; ici le fond
   est sable, donc les couleurs sont inversées : titre en bleu, filet brun. */
/* Centre le bloc dans son ensemble (largeur reduite a son contenu le plus
   large, puis centree), plutot que chaque repere independamment : sinon,
   les trois lignes n'ayant pas la meme longueur, leurs icones ne tombent
   plus les unes sous les autres et le groupe paraît desaligne. */
.accroche__meta {
  margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--c-ligne);
  display: grid; gap: 1rem; font-size: .9rem; color: var(--c-texte-doux);
  width: fit-content; margin-inline: auto;
}
.accroche__meta li { display: flex; gap: .7rem; align-items: flex-start; }
.accroche__meta .ico { color: var(--accent); margin-top: .15em; }
.accroche__meta strong {
  display: block; color: var(--titre); font-family: var(--f-titre); font-weight: 600;
}

/* La commune ne se coupe pas. Laissee libre, la ligne cassait sur le trait
   d'union de Lagny-sur-Marne et abandonnait le departement seul en bout de
   colonne. Elle passe donc a la ligne d'un bloc, ou pas du tout. */
.accroche__meta .lieu { white-space: nowrap; }

/* --- Bandeau valeurs (A) -------------------------------------------------- */
.valeurs { background: var(--titre); color: var(--c-blanc); padding-block: 1.8rem; }
.valeurs ul {
  display: grid; grid-template-columns: 1fr; justify-content: center;
  gap: 1rem 2rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
/* Deux colonnes seulement quand deux mots comme « Professionnalisme » y tiennent. */
@media (min-width: 400px) { .valeurs ul { grid-template-columns: repeat(2, auto); } }
.valeurs li { display: flex; align-items: center; gap: .6rem; }
.valeurs .ico { color: var(--c-brun-clair); }

/* ==========================================================================
   « QUEL EST VOTRE BESOIN ? » — maquette C, onglets en CSS pur (radios
   masquées), sans JavaScript.
   Écart avec C : les panneaux n'emportent plus de photos. Dans le site
   définitif les photos servent les sections détaillées (prestations, balade,
   approche) reprises de A ; les répéter ici les aurait montrées deux fois et
   allongé la section dont le seul rôle est d'aiguiller.
   ========================================================================== */
.parcours { background: var(--bg-alt); }
/* Surtitre et titre centrés sur mobile (une seule colonne) ; repassent à
   gauche sur desktop, où ils gardent leur alignement d'origine. */
.parcours .surtitre { justify-content: center; }
.parcours > .wrap > h2 { text-align: center; }
.onglets { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0; justify-content: center; }
.onglets label {
  cursor: pointer; display: inline-flex; align-items: center; gap: .55rem;
  padding: .75rem 1.2rem; border: 1px solid var(--c-ligne);
  background: var(--c-blanc); font-weight: 700; font-size: .95rem; border-radius: 999px;
}
.onglets label:hover { border-color: var(--titre); }
.parcours input { position: absolute; opacity: 0; pointer-events: none; }
.panneau { display: none; }

#p1:checked ~ .onglets label[for="p1"],
#p2:checked ~ .onglets label[for="p2"],
#p3:checked ~ .onglets label[for="p3"] { background: var(--titre); color: var(--c-blanc); border-color: var(--titre); }
#p1:checked ~ #v1, #p2:checked ~ #v2, #p3:checked ~ #v3 { display: block; }

/* Les radios sont hors champ : sans ça, l'onglet sélectionné au clavier
   n'aurait aucun repère visible. */
#p1:focus-visible ~ .onglets label[for="p1"],
#p2:focus-visible ~ .onglets label[for="p2"],
#p3:focus-visible ~ .onglets label[for="p3"] { outline: 3px solid var(--c-lien); outline-offset: 3px; }

.panneau .lead { max-width: 78ch; }
/* Renvoi vers la section détaillée, en bas de chaque panneau. */
.panneau__suite { margin-top: 1.6rem; text-align: center; }

/* Étapes du parcours (C) : fiche à filet brun, numéro et tarif en vis-à-vis.
   Elles sont distinctes des étapes de « Mon approche », qui gardent la fiche
   arrondie à pastille numérotée de A — d'où la portée .parcours. */
.parcours .etapes { display: grid; gap: 1rem; margin-top: 1.6rem; counter-reset: e; }
.parcours .etapes li {
  background: var(--c-blanc); padding: 1.3rem 1.4rem 1.3rem 3.6rem;
  position: relative; border: 0; border-left: 3px solid var(--accent); border-radius: 0;
}
.parcours .etapes li::before {
  counter-increment: e; content: counter(e);
  /* translate: none annule le centrage vertical herite de .etapes li::before :
     ici le chiffre se cale en haut, en vis-a-vis du titre. */
  position: absolute; left: 1.1rem; top: 1.2rem; translate: none;
  display: block; width: auto; height: auto; background: none; border-radius: 0;
  font-family: var(--f-titre); font-size: 1.3rem; color: var(--accent);
}
.parcours .etapes h3 { margin-bottom: .2rem; }
.parcours .etapes .tarif {
  float: right; font-family: var(--f-titre); color: var(--accent);
  font-size: 1.1rem; margin-left: 1rem;
}

/* Encadré vert (C), pour un point qui sort du barème. */
.mise-en-avant {
  background: var(--c-detail); color: var(--c-blanc); padding: 1.6rem;
  border-radius: var(--radius); margin-top: 1.5rem;
}
.mise-en-avant h3 { color: var(--c-blanc); display: flex; align-items: center; gap: .6rem; }

/* ==========================================================================
   SPLIT (A) : texte d'un côté, photo bord à bord de l'autre.
   ========================================================================== */
.split { padding: 0; }
/* Meme raison que .accroche__in : la grille texte/photo est plafonnee a
   --maxw et centree, pour qu'un ecran tres large ne cale pas le texte sur la
   gouttiere du contenu pendant que la photo continue jusqu'au bord de l'ecran. */
.split__in { display: grid; max-width: var(--maxw); margin-inline: auto; }
.split__texte { padding: var(--section) var(--gouttiere); }
/* Titre et chapeau centrés tant que la photo est empilée sous le texte
   (mobile) ; repassent à gauche une fois les deux colonnes côte à côte
   (desktop, 1000px). L'étiquette suit : elle passe de pilule centrée à
   pilule alignée sur le texte. */
.split__texte h2, .split__texte .chapeau { text-align: center; }
.split__texte > .etiquette { display: flex; width: fit-content; margin-inline: auto; }
/* Meme raison que .accroche__media : sur mobile c'est le dernier element
   de la section « balade en forêt », donc bord a bord avec la suivante. */
.split__media { display: grid; margin-bottom: 2rem; }
.split__media > .ph--plein { aspect-ratio: 5 / 4; height: auto; max-height: min(46vh, 400px); }

/* ==========================================================================
   Grille asymétrique (A) : colonne d'appui à gauche, contenu à droite.
   ========================================================================== */
.duo-col { display: grid; gap: 2.5rem; }
/* Titre et chapeau centrés tant que la colonne d'appui n'est pas encore à
   côté du contenu (mobile) ; repassent à gauche au passage en grille
   (desktop, 1000px). */
.duo-col__aside h2, .duo-col__aside .chapeau { text-align: center; }
/* L'ecart avec le titre appartient a la figure. Pose sur l'image, il la
   decalait a l'interieur du cadre .ph, dont le fond sable apparaissait alors
   en bande au-dessus de la photo. Le cadre porte deja l'arrondi et le rognage,
   l'image n'a rien a ajouter. */
.duo-col__aside figure { margin-top: 1.5rem; }

/* Pas de filet brun sous le titre de la colonne d'appui : il tombait juste
   au-dessus de la photo, ou il se lisait comme un trait de separation parasite
   plutot que comme la ponctuation d'un titre. Les titres centres des autres
   sections le gardent. */
.duo-col .titre-sec::after { display: none; }
.duo-col__aside figcaption {
  font-size: .82rem; color: var(--c-texte-doux); margin-top: .6rem;
  display: flex; gap: .5rem; align-items: flex-start;
}
.duo-col__aside figcaption .ico { color: var(--accent); margin-top: .1rem; }

/* --- Cartes (A) ----------------------------------------------------------- */
.grille { display: grid; gap: 1.25rem; }
.carte {
  background: var(--c-blanc); border: 1px solid var(--c-ligne);
  border-radius: var(--radius); padding: 1.6rem;
}
.carte h3 { margin-bottom: .5rem; display: flex; align-items: center; gap: .6rem; }
.carte h3 .ico { color: var(--accent); }

/* Bloc « une photo qui porte le propos + les cartes qui l'expliquent ».
   La photo occupe toute la hauteur de la colonne, les cartes s'empilent
   à côté : plus de carte à moitié vide face à une carte pleine. */
.bloc-photo { display: grid; gap: 1.25rem; }
.bloc-photo__media {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-blanc); border-radius: var(--radius);
  /* Pas de bordure : elle courait au-dessus de la photo, ou son brun a 28 %
     sur blanc donnait une ligne beige clair, et enfermait les angles ronds
     du cadre autour d'une photo qui, elle, semblait a angles droits.
     Le blanc de la carte se detache deja seul du sable de la section. */
}
/* La photo coiffe la carte : ses coins hauts reprennent l'arrondi de la carte,
   en repondant a ceux du bas du cartouche de legende. Le fond du cadre passe au
   blanc de la carte pour qu'aucun liere sable ne puisse apparaitre autour. */
.bloc-photo__media > .ph {
  flex: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--c-blanc);
}
/* Ici la légende est à l'intérieur du cadre blanc : elle prend un padding
   plutôt que la marge haute de .legende. */
.bloc-photo__media figcaption { margin-top: 0; padding: 1rem 1.2rem; font-size: .88rem; }
.bloc-photo__media figcaption .ico { color: var(--accent); margin-top: .15em; }
.bloc-photo__cartes { display: grid; gap: 1.25rem; }

/* Étapes de « Mon approche » (A) : fiche arrondie, numéro en pastille. */
.etapes { counter-reset: e; display: grid; gap: 1.25rem; }
.etapes li {
  background: var(--c-blanc); border: 1px solid var(--c-ligne); border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.5rem 4.4rem; position: relative;
}
.etapes li::before {
  counter-increment: e; content: counter(e);
  /* Centree dans la hauteur de la fiche, et non calee sur la ligne du titre :
     une fiche a deux lignes de texte laissait la pastille tout en haut. */
  position: absolute; left: 1.5rem; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--bg-alt); color: var(--accent); font-family: var(--f-titre); font-weight: 700;
}
.etapes h3 { margin-bottom: .3rem; }

.liste-check { display: grid; gap: .6rem; margin-top: 1rem; }
.liste-check li { display: flex; gap: .7rem; align-items: flex-start; }
.liste-check .ico { color: var(--c-detail); margin-top: .18em; }

/* --- Tarifs (A) ----------------------------------------------------------- */
.tarifs { background: var(--bg-alt); }
/* Les intertitres suivent le centrage du titre "Tarifs" au-dessus : mobile
   comme desktop, c'est le meme fil de section centre, pas un cas particulier
   de largeur d'ecran. */
.tarifs > .wrap > h3 { text-align: center; }
.prix {
  font-family: var(--f-titre); font-size: 1.9rem; color: var(--accent);
  display: block; margin: .3rem 0 .6rem;
}
.carte--phare { border: 2px solid var(--titre); position: relative; }
.badge {
  position: absolute; top: -.85rem; left: 1.6rem; background: var(--titre);
  color: var(--c-blanc); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .8rem; border-radius: 999px;
}
.note {
  font-size: .9rem; color: var(--c-texte-doux); margin-top: 1.8rem;
  display: flex; gap: .6rem; align-items: flex-start; justify-content: center; text-align: left;
}
.note .ico { color: var(--accent); margin-top: .15em; }

/* --- Balade (A) ----------------------------------------------------------- */
.etiquette {
  display: inline-flex; align-items: center; align-self: flex-start; gap: .5rem;
  background: var(--c-detail); color: var(--c-blanc);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .9rem; border-radius: 999px; margin-bottom: 1rem;
}

/* --- Citation (C) --------------------------------------------------------- */
.citation-bloc { position: relative; }
.citation-bloc__decoupe { display: none; }

/* Le chien détouré de la charte accompagne la citation. La silhouette est très
   verticale (232 x 520) : dimensionnée par sa largeur, comme dans la maquette
   d'origine, elle mesurait 336 px de haut pour une citation d'à peine 180 px et
   dépassait par le haut de la section.
   On inverse donc la logique — c'est le bloc qui se règle sur le chien, et non
   l'inverse. Le bloc reçoit une hauteur minimale, la citation s'y centre, et le
   chien prend cette hauteur : il retrouve sa taille de la maquette (≈ 150 px de
   large) tout en posant les pattes sur la ligne de base du texte, sans jamais
   sortir de la section.
   Le seuil est à 1250 px : en dessous, la marge à droite du bloc étroit
   (820 px) ne suffit pas à l'accueillir et il sortait de l'écran. */
@media (min-width: 1250px) {
  .citation-bloc {
    min-height: 340px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .citation-bloc__decoupe {
    display: block; position: absolute; right: -185px; bottom: 0;
    height: 100%; width: auto; opacity: .9;
  }
}
blockquote.grand {
  font-family: var(--f-citation); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  color: var(--titre); text-align: center; line-height: 1.5;
}
blockquote.grand .ico { color: var(--accent); display: block; margin: 0 auto 1.5rem; width: 2.4rem; height: 2.4rem; }
blockquote.grand cite {
  display: block; font-size: .8rem; font-style: normal; color: var(--accent);
  margin-top: 1.2rem; letter-spacing: .16em; text-transform: uppercase;
}

/* --- FAQ (C), native, zéro JS -------------------------------------------- */
/* Surtitre et titre centrés sur mobile (une seule colonne) ; repassent à
   gauche sur desktop, où ils gardent leur alignement d'origine. */
#faq .surtitre { justify-content: center; }
#faq > .wrap > h2 { text-align: center; }
.faq details { border-bottom: 1px solid var(--c-ligne); break-inside: avoid; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-family: var(--f-titre); color: var(--titre); font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 1.1rem;
  color: var(--accent); font-size: 1.4rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-bottom: 1.2rem; }

/* ==========================================================================
   « ON EN PARLE » — maquette C : deux colonnes, coordonnées en liste de
   définitions, sur le bleu de la charte.
   ========================================================================== */
.contact { background: var(--titre); color: var(--c-blanc); }
.contact h2, .contact h3 { color: var(--c-blanc); }
.contact a { color: var(--c-brun-clair); }
.contact .surtitre { color: var(--c-brun-clair); }
.contact p { color: rgba(255,255,255,.85); }
/* Sur mobile, colonne unique : texte, photo et coordonnées sont centres
   plutot que colles au bord gauche. Le desktop deux-colonnes (plus bas)
   revient a un alignement a gauche, plus lisible en ligne. */
.contact__in { display: grid; gap: 2.5rem; text-align: center; }
.contact .surtitre { justify-content: center; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; justify-content: center; }
/* width: fit-content + margin-inline: auto (et non justify-items: center) :
   sinon chaque entree (dt+dd) se centre independamment sur sa propre largeur
   et, n'ayant pas toutes la meme longueur (« Email » vs « Zone d'intervention »),
   leurs icones ne tombent plus les unes sous les autres. */
.contact dl { display: grid; gap: 1.4rem; width: fit-content; margin-inline: auto; }
.contact dt {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-brun-clair);
  display: flex; align-items: center; gap: .5rem;
}
/* Pas d'indentation ici : le bloc dt+dd est centre et retreci a son propre
   contenu (fit-content ci-dessus), donc dt et dd partagent deja le meme bord
   gauche. L'indentation d'1.9rem ne sert qu'au desktop deux-colonnes, ou elle
   aligne la valeur sous le texte du libelle plutot que sous son icone. */
.contact dd { margin: 0; font-size: 1.05rem; padding-left: 0; }

/* --- Pied de page (C) : le brun de la charte ----------------------------- */
.pied {
  background: var(--accent); color: rgba(255,255,255,.9);
  padding-block: 2rem; font-size: .87rem;
  position: relative; overflow: hidden;
}
.pied a { color: var(--c-blanc); }
.pied__in { display: grid; gap: .8rem; align-items: center; }
.pied .reseaux { display: flex; gap: 1rem; }
.filigrane--pied { right: -3rem; bottom: -2.5rem; opacity: .09; }

/* ==========================================================================
   PHOTOS DANS LE CONTENU (A, plus la bande de C)
   ========================================================================== */

/* Bannière : la photo coiffe la carte et vient toucher ses bords. On arrondit
   la bannière plutôt que de rogner la carte — un overflow:hidden ici couperait
   la pastille « Point de départ », qui déborde volontairement vers le haut. */
.carte__banniere {
  margin: -1.6rem -1.6rem 1.2rem;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* Illustration en fin de carte, avec sa légende. */
.carte__photo { margin: 1.2rem 0 1.4rem; }

/* Séquence de trois photos légendées : les trois âges du chiot, dans l'ordre.
   Ce n'est pas une galerie — chaque image porte une étape du parcours. */
.triptyque { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
@media (min-width: 640px) { .triptyque { grid-template-columns: repeat(3, 1fr); } }

/* Carte à colonne d'appui : la photo tient la gauche, le texte la droite. */
.carte--avec-photo { display: grid; gap: 1.4rem; }
.carte__aside { margin: 0; }
@media (min-width: 860px) {
  .carte--avec-photo { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: start; }
  /* En colonne étroite, le carré tient mieux la hauteur du texte qu'un paysage. */
  .carte__aside .ph { aspect-ratio: 1 / 1; }
}

/* Balade : la photo du groupe illustre une règle précise du texte — six chiens
   maximum. Elle vit donc dans la colonne de texte, sous la liste, et non
   empilée sous la photo principale où elle l'écraserait. */
.balade__groupe { margin: 1.8rem auto 0; max-width: 440px; }

/* Bande illustrée dans le fil du texte (C). Le plafond de largeur compte
   autant que celui de hauteur : étalée sur toute la colonne, une photo de
   800 pixels est à la fois agrandie et écrasante face au texte. */
.bande { margin: 2.5rem 0 0; max-width: 720px; }
.bande--centree { margin: 2rem auto 0; max-width: 420px; }

/* Contact : la photo ouvre la colonne des coordonnées. */
.contact__photo { margin: 0 auto 2rem; max-width: 360px; }
.contact__photo .legende { color: rgba(255, 255, 255, .82); }
.contact__photo .legende .ico { color: var(--c-brun-clair); }

/* --- Barre d'action mobile (A) -------------------------------------------
   C'est elle qui remplace le menu sous 1000 px : sur un téléphone, les deux
   seules actions qui comptent restent sous le pouce en permanence. */
.barre {
  position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; gap: .5rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--c-blanc); border-top: 1px solid var(--c-ligne);
}
.barre .btn { flex: 1; padding: .7rem .5rem; font-size: .95rem; justify-content: center; }

/* ==========================================================================
   Élargissement progressif
   ========================================================================== */
@media (min-width: 700px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .valeurs ul { grid-template-columns: repeat(3, auto); }
  .note { justify-content: flex-start; }
}

@media (min-width: 720px) {
  .accroche__meta { grid-template-columns: repeat(3, 1fr); width: auto; margin-inline: 0; }
  .pied__in { grid-template-columns: 1fr auto auto; gap: 2rem; }
}

@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .barre { display: none; }
  .nav { display: flex; }

  /* Accroche : photo bord à bord tant que l'écran ne dépasse pas --maxw,
     texte aligné sur la gouttière du contenu (voir .accroche__in plus haut). */
  .accroche__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: stretch; }
  /* Là, la photo reprend la hauteur que lui donne la colonne de texte. */
  .accroche__media { margin-bottom: 0; }
  .accroche__media > .ph--plein { aspect-ratio: auto; height: 100%; max-height: none; }
  .accroche__texte {
    display: flex; flex-direction: column; justify-content: center;
    padding-inline: var(--gouttiere) clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(4rem, 7vw, 7rem);
  }
  .accroche h1 { text-align: left; }
  .actions { justify-content: flex-start; }
  .accroche__texte .mention-cgv { text-align: left; }

  /* Même traitement pour les sections « split » (la balade) */
  .split__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: stretch; }
  .split__media { margin-bottom: 0; }
  .split__media > .ph--plein { aspect-ratio: auto; height: 100%; max-height: none; }
  .split__texte {
    display: flex; flex-direction: column; justify-content: center;
    padding-inline: var(--gouttiere) clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(4rem, 7vw, 7rem);
  }
  .split--inverse .split__media { order: -1; }
  .split--inverse .split__texte {
    padding-inline: clamp(2.5rem, 5vw, 5rem) var(--gouttiere);
  }
  .split__texte h2, .split__texte .chapeau { text-align: left; }
  .split__texte > .etiquette { display: inline-flex; width: auto; margin-inline: 0; }

  /* Colonne d'appui à gauche, contenu à droite (Mon approche) */
  .duo-col { grid-template-columns: minmax(260px, 350px) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5.5rem); }
  .duo-col__aside { position: sticky; top: 6rem; align-self: start; }
    .duo-col .titre-sec { margin-bottom: 0; }
  .duo-col__aside h2, .duo-col__aside .chapeau { text-align: left; }

  .parcours .surtitre { justify-content: flex-start; }
  .parcours > .wrap > h2 { text-align: left; }
  .onglets { justify-content: flex-start; }
  .panneau__suite { text-align: left; }

  /* La FAQ se lit mieux sur deux colonnes que sur une seule très longue */
  .faq { columns: 2; column-gap: 4rem; }
  #faq .surtitre { justify-content: flex-start; }
  #faq > .wrap > h2 { text-align: left; }

  .valeurs ul { grid-template-columns: repeat(6, auto); gap: 2.5rem; }

  .contact__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; text-align: left; }
  .contact .surtitre { justify-content: flex-start; }
  .contact__actions { justify-content: flex-start; }
  .contact dl { grid-template-columns: repeat(2, 1fr); gap: 2rem; width: auto; margin-inline: 0; }
  .contact dd { padding-left: 1.9rem; }
  .contact__photo { margin: 0 0 2rem; }

  /* La hauteur est plafonnée pour que la photo n'étire pas la rangée :
     les deux cartes et la photo se retrouvent à la même hauteur.
     align-items: start — et non stretch : en étirant la colonne photo sur la
     hauteur de la rangée, on forçait la photo en paysage et le troisième chien
     sortait du cadre. */
  .bloc-photo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; }
}

@media (min-width: 1500px) {
  .grille--3 { gap: 2rem; }
}


/* ==========================================================================
   PAGES LÉGALES — mentions, CGV, politique de confidentialité
   --------------------------------------------------------------------------
   Trois pages à part, et non une section de plus sur l'accueil : ces textes
   doivent porter chacun leur adresse, c'est ce que le pied de page annonce et
   ce qu'un tiers (client, plateforme, assureur) vient chercher directement.
   Le gabarit est celui de la maquette B — bandeau de titre bleu, sommaire
   collant à gauche, colonne de texte à droite — repeint aux couleurs du site.
   ========================================================================== */

/* Bandeau de titre : il remplace l'accroche sur les pages intérieures. */
.bandeau { background: var(--titre); color: var(--c-blanc); padding-block: clamp(2.5rem, 6vw, 4rem); }
.bandeau h1 { color: var(--c-blanc); font-size: clamp(1.7rem, 4.5vw, 2.8rem); }
.bandeau p { color: rgba(255,255,255,.85); max-width: var(--maxw-texte); margin-top: .7rem; }
.bandeau .maj { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-brun-clair); margin-top: 1.2rem; }

.legal-illustre { position: relative; overflow: hidden; }
.filigrane--legal { right: -2rem; top: 2rem; opacity: .07; }

/* Sommaire collant. Ces pages se consultent par recherche d'un point précis
   (« qui héberge ? », « combien de temps pour annuler ? ») bien plus qu'elles
   ne se lisent en entier : le sommaire reste donc visible pendant le défilement. */
.avec-sommaire { display: grid; gap: 2.5rem; position: relative; }
.avec-sommaire > * { min-width: 0; }
.sommaire { align-self: start; }
.sommaire h2 { font-size: 1rem; margin-bottom: .6rem; }
.sommaire a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem 0; font-size: .95rem;
  color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--c-ligne);
}
.sommaire a:hover { color: var(--titre); }
.sommaire .ico { color: var(--accent); flex: none; }
.sommaire .autres { margin-top: 1.6rem; }

/* Colonne de texte. La longueur de ligne est bornée par --maxw-texte : un
   paragraphe de CGV qui court sur 1300 px ne se lit pas. */
.texte-legal { max-width: var(--maxw-texte); }
/* scroll-margin-top : l'en-tête est collante, sans quoi elle recouvrirait le
   titre visé par une ancre du sommaire. */
.texte-legal h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem); margin-top: 3.2rem; scroll-margin-top: 5.5rem;
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h2::after {
  content: ""; display: block; width: 56px; height: 2px;
  background: var(--accent); margin-top: .8rem;
}
.texte-legal h3 { margin-top: 2rem; margin-bottom: .35rem; scroll-margin-top: 5.5rem; }
.texte-legal p { margin-top: .85em; }
.texte-legal ul, .texte-legal ol { display: grid; gap: .5rem; margin-top: .9em; padding-left: 1.4rem; }
.texte-legal ul { list-style: disc; }
.texte-legal ol { list-style: decimal; }
.texte-legal li::marker { color: var(--accent); }
.texte-legal small { display: block; margin-top: 1.2rem; font-size: .85rem; color: var(--c-texte-doux); }

/* Liste de définitions : identité de l'éditeur, fiche d'un traitement RGPD.
   Le terme passe à gauche dès qu'il y a la place, sinon il reste au-dessus. */
.def { display: grid; gap: .85rem; }
.def > div { display: grid; gap: .15rem; }
.def dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.def dd { margin: 0; }
@media (min-width: 620px) {
  .def > div { grid-template-columns: 200px minmax(0, 1fr); gap: 1.2rem; align-items: baseline; }
}
.fiche {
  background: var(--c-blanc); border: 1px solid var(--c-ligne);
  border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-top: 1.4rem;
}

/* Registre des traitements : une carte par finalité plutôt qu'un tableau.
   Un tableau à cinq colonnes ne tient pas sur un téléphone, et un tableau
   qu'il faut pousser du doigt n'est pas lu. */
.traitements { display: grid; gap: 1rem; margin-top: 1.4rem; }
.traitement {
  background: var(--c-blanc); border: 1px solid var(--c-ligne);
  border-radius: var(--radius); padding: 1.3rem 1.5rem;
}
.traitement h3 { margin: 0 0 .9rem; display: flex; align-items: center; gap: .6rem; }
.traitement h3 .ico { color: var(--accent); }

/* Encart d'information. La variante --alerte sert au rappel « à compléter ». */
.encart {
  background: var(--bg-alt); border-left: 4px solid var(--c-detail);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.2rem 1.4rem; margin-block: 1.8rem;
  display: flex; gap: .9rem; align-items: flex-start;
}
.encart > .ico { color: var(--c-detail); margin-top: .2em; flex: none; }
.encart strong { color: var(--c-detail); }
.encart--alerte { border-left-color: var(--accent); }
.encart--alerte > .ico, .encart--alerte strong { color: var(--accent); }

/* Mention à renseigner avant mise en ligne. Volontairement voyante : le risque,
   sur ce genre de page, est d'en oublier une et de publier « [SIRET] ». */
.a-completer {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-bottom: 2px dotted var(--accent);
  color: var(--c-brun); font-weight: 700; padding: .05em .3em; border-radius: 3px;
}

/* Formulaire type de rétractation : il doit être reproduit tel quel et
   détachable, d'où le cadre. */
.formulaire-type {
  background: var(--c-blanc); border: 1px dashed var(--accent); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin-top: 1.2rem; font-size: .95rem;
}
.formulaire-type p { margin-top: .6em; }
.formulaire-type p:first-child { margin-top: 0; }

@media (min-width: 1000px) {
  .avec-sommaire { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); }
  .sommaire { position: sticky; top: 6rem; }
}