@import url('polices.css');

/* ==========================================================================
   Prototype Andaï — transcription mesurée de la maquette de Clémence.
   Toutes les valeurs viennent du PDF `Maquette site.pdf`, relevées et non
   redérivées : la maquette fait foi. La page d'origine mesure 1024 pt de
   large ; à cette largeur, le rendu est au point près.
   Mobile-first : la base vise le téléphone, les paliers montent en min-width.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Couleurs relevées dans la maquette */
  --creme: #FFF4E8;
  --vert: #0F5B5C;
  --corail: #FF6B57;
  --jaune: #F4C430;
  --prune: #5C4B5A;

  --titre: 'Bricolage Grotesque', Georgia, serif;
  --courant: 'Source Sans 3', system-ui, sans-serif;
  --chiffre: 'Courier Prime', 'Courier New', monospace;

  /* Échelle typographique — valeurs de la maquette (grand écran) */
  --t-h1: 50px;
  --t-chapo: 26px;
  --t-h2: 27px;
  --t-h3: 25px;
  --t-courant: 23px;
  --t-carte: 21px;
  --t-prix: 32px;
  --t-etape: 60px;

  /* Rythme et formes */
  --gouttiere: 36px;
  --rayon-carte: 14px;
  --rayon-bouton: 8px;
  --rayon-vignette: 16px;
  --largeur: 1024px;
  --marge: 44px;
}

/* --- Base --------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--vert);
  font-family: var(--courant);
  font-size: 18px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 700; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.evitement {
  position: absolute;
  left: -9999px;
  background: var(--vert);
  color: var(--creme);
  padding: 12px 20px;
}
.evitement:focus { left: 8px; top: 8px; z-index: 10; }

/* Titre nécessaire à la hiérarchie mais absent de la maquette : retiré de
   l'écran, jamais du lecteur d'écran. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contenant {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 20px;
}

/* Le surlignage jaune sur un fragment de phrase : motif récurrent de la
   maquette, et geste de main plutôt que composant de catalogue. */
.surligne {
  background: var(--jaune);
  border-radius: 999px;
  padding: 0.05em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

.entete {
  background: var(--creme);
  padding: 18px 0;
}
.entete .contenant {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
}
.logo { flex: 0 0 auto; }
.logo img { width: 132px; }

.navigation {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px 20px;
  flex-wrap: wrap;
  font-size: 17px;
}
.navigation a { text-decoration: none; }
.navigation a:hover, .navigation a:focus { text-decoration: underline; }

/* Le bouton du menu replié n'apparaît que si le JavaScript a posé
   `est-repliable` sur l'en-tête. Sans lui, la navigation reste affichée
   comme avant : on n'enferme jamais des liens derrière un bouton mort. */
.bascule-menu {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 10px 4px;
  color: var(--vert);
  cursor: pointer;
  line-height: 0;
}
.bascule-menu:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.barres, .barres::before, .barres::after {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.barres { position: relative; }
.barres::before, .barres::after { content: ""; position: absolute; left: 0; }
.barres::before { top: -8px; }
.barres::after { top: 8px; }

/* Ouvert, les trois barres deviennent la croix qui referme. */
.bascule-menu[aria-expanded="true"] .barres { background: transparent; }
.bascule-menu[aria-expanded="true"] .barres::before { top: 0; transform: rotate(45deg); }
.bascule-menu[aria-expanded="true"] .barres::after { top: 0; transform: rotate(-45deg); }

.entete.est-repliable .bascule-menu { display: block; }
.entete.est-repliable .navigation { display: none; }
.entete.est-repliable .navigation.est-ouvert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-left: 0;
  padding: 8px 0 2px;
}
/* L'aisance du doigt vient du rembourrage des liens, pas d'une taille de
   police : `font-size` et `gap` appartiennent au palier 1024, et une règle
   plus spécifique posée ici les emporterait jusque sur grand écran. */
.entete.est-repliable .navigation.est-ouvert a { padding: 10px 0; }

/* --- Héros -------------------------------------------------------------- */

.heros { padding: 34px 0 44px; }

.pastille {
  display: inline-block;
  background: var(--vert);
  color: var(--creme);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 17px;
}

.heros h1 {
  font-size: 34px;
  line-height: 1.06;
  margin: 20px 0 16px;
  letter-spacing: -0.01em;
}

.chapo {
  font-family: var(--titre);
  font-size: 19px;
  line-height: 1.35;
  max-width: 27em;
}

/* --- Bande des séjours -------------------------------------------------- */

.sejours {
  background: var(--vert);
  padding: 34px 0;
}

.rangee-cartes {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* La marge négative puis le rembourrage laissent la carte suivante
     déborder jusqu'au bord de l'écran : c'est ce qui donne envie de pousser. */
  margin: 0 -20px;
  padding: 0 20px 4px;
  scroll-padding-left: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rangee-cartes::-webkit-scrollbar { display: none; }
.rangee-cartes:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }

.carte {
  flex: 0 0 86%;
  scroll-snap-align: start;
}

/* Les flèches de la maquette, devenues fonctionnelles. Révélées par le
   JavaScript, et seulement s'il y a de quoi défiler. */
.commandes-carrousel {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.commandes-carrousel[hidden] { display: none; }

.fleche {
  background: none;
  border: 0;
  padding: 6px;
  color: var(--corail);
  cursor: pointer;
  line-height: 0;
}
.fleche:disabled { opacity: 0.35; cursor: default; }
.fleche:not(:disabled):hover { color: var(--creme); }
.fleche:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.carte {
  background: var(--creme);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.carte-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 12px;
  font-size: 16px;
}

.carte-photo {
  width: 100%;
  aspect-ratio: 398 / 223;
  object-fit: cover;
}

.carte-corps {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.carte h3 { font-size: 21px; margin-bottom: 10px; }

.carte-programme { font-size: 16px; line-height: 1.4; }

.carte-details {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-family: var(--courant);
  font-style: italic;
  font-size: 16px;
}
.carte-details li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.carte-details svg { flex: 0 0 auto; }

.carte-pied {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.prix {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 26px;
  white-space: nowrap;
}

/* Ce que comprend le prix. Le panneau s'ouvre vers le haut, donc à
   l'intérieur de la carte : la rangée défile horizontalement et rogne
   tout ce qui en sort.

   Il se cale sur `.carte-pied`, pas sur le prix, et c'est ce qui lui
   donne sa largeur : `left: 0; right: 0` vaut exactement le corps de la
   carte, à tous les paliers. Mesuré depuis le prix, il aurait fallu
   deviner une largeur en `vw` — trop large de 20 px sur un téléphone de
   320 px, et de 22 px sur tablette, sans que rien ne le signale. */

.info-prix {
  font: inherit;
  font-size: 0.42em;
  vertical-align: super;
  background: none;
  border: 0;
  padding: 0 0 0 2px;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.info-prix:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }

.detail-prix {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  /* Plus étroit que la carte : la marge automatique le cale à droite,
     sous le (i) qui l'ouvre. */
  margin-left: auto;
  max-width: 320px;
  z-index: 5;
  background: var(--vert);
  color: var(--creme);
  border-radius: var(--rayon-bouton);
  padding: 16px 18px;
  font-family: var(--courant);
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 91, 92, 0.3);
}
/* Le survol sur ce qui pointe, la classe partout ailleurs : au doigt,
   il n'y a pas de survol, et un `:hover` qui colle après un toucher
   laisserait le panneau ouvert sans moyen de le refermer. */
@media (hover: hover) {
  .prix-bloc:hover .detail-prix { display: block; }
}
/* Le pont invisible qui couvre les 10 px entre le prix et le panneau :
   sans lui, la souris qui monte vers le texte perd le survol en route et
   referme ce qu'elle allait lire. */
.detail-prix::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}
.detail-prix.est-ouvert { display: block; }

.detail-prix ul { margin: 8px 0 0; padding-left: 18px; }
.detail-prix li { margin-bottom: 4px; }
.detail-prix li:last-child { margin-bottom: 0; }

.bouton {
  display: inline-block;
  background: var(--corail);
  color: var(--creme);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--rayon-bouton);
  padding: 12px 22px;
  cursor: pointer;
}
.bouton:hover, .bouton:focus { background: #F2543F; }

/* --- Pourquoi partir ---------------------------------------------------- */

.pourquoi { padding: 40px 0 44px; }
.pourquoi h2 { font-size: 22px; margin-bottom: 26px; }

.arguments {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.argument {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 17px;
  line-height: 1.4;
}
.argument img {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--rayon-vignette);
}

/* --- Bande newsletter --------------------------------------------------- */

.newsletter {
  background: var(--prune);
  color: var(--creme);
  padding: 32px 0;
}
.newsletter p {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.37;
  margin-bottom: 20px;
}
.formulaire-newsletter {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.formulaire-newsletter input {
  font-family: var(--courant);
  font-size: 19px;
  color: var(--prune);
  background: var(--creme);
  border: 0;
  border-radius: var(--rayon-bouton);
  padding: 16px 18px;
  width: 100%;
}
.formulaire-newsletter input::placeholder { color: var(--prune); opacity: 0.7; }

/* --- Comment ça marche -------------------------------------------------- */

.marche { padding: 40px 0 44px; }
.marche h2 { font-size: 22px; margin-bottom: 28px; }

.etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.etape {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 17px;
  line-height: 1.4;
}
.etape::before {
  counter-increment: etape;
  content: counter(etape);
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--vert);
  font-family: var(--chiffre);
  font-weight: 700;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Pied de page ------------------------------------------------------- */

.pied { padding: 40px 0 0; }
.pied-haut {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.pied h2 { font-size: 22px; margin-bottom: 16px; }
.manifeste { font-size: 17px; line-height: 1.45; }
.manifeste p + p { margin-top: 14px; }

.courriel {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 18px;
}

.bloc-instagram {
  background: var(--vert);
  color: var(--creme);
  border-radius: var(--rayon-carte);
  padding: 24px;
  text-decoration: none;
  display: block;
}
.bloc-instagram span {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 21px;
  display: block;
  margin-bottom: 18px;
}

.pied-bas {
  margin-top: 36px;
  padding: 22px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 16px;
}
.pied-bas a { text-decoration: none; }
/* Souligné, parce que rien d'autre ne dit que c'est un lien. */
.pied-bas .lien-mentions { text-decoration: underline; text-underline-offset: 0.22em; }
.pied-bas .courriel { margin-top: 0; }
.reseaux { display: flex; gap: 14px; }

/* La ligne qui ferme la page : nom, métier, ville. Elle existe pour le
   passage cité hors du site, qui arrive sans le reste — d'où sa présence
   sur toutes les pages, et sa discrétion ici. */
.pied-identite {
  padding: 18px 0 30px;
  font-size: 14px;
  line-height: 1.4;
}

/* --- Page d'attente ----------------------------------------------------- */

.attente { padding: 60px 0 90px; }
.attente h1 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 18px;
}
.attente .chapo { margin-bottom: 26px; }
.attente .formulaire-newsletter { max-width: 520px; }
.attente .formulaire-newsletter input {
  background: transparent;
  border: 2px solid var(--vert);
  color: var(--vert);
}
.attente .formulaire-newsletter input::placeholder { color: var(--vert); opacity: 0.75; }
.attente .bouton { align-self: flex-start; }

/* ==========================================================================
   Palier tablette
   ========================================================================== */

@media (min-width: 700px) {
  /* L'en-tête suit le défilement dès que la navigation tient en une
     ligne. En dessous, c'est le menu replié qui prend le relais. */
  .entete { position: sticky; top: 0; z-index: 20; }
  .entete.est-repliable .bascule-menu { display: none; }
  .entete.est-repliable .navigation,
  .entete.est-repliable .navigation.est-ouvert {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    margin-left: auto;
    padding: 0;
  }
  .entete.est-collee { box-shadow: 0 2px 14px rgba(15, 91, 92, 0.14); }
  /* Sans quoi les ancres de la navigation s'arrêtent sous l'en-tête. */
  html { scroll-padding-top: 80px; }

  .carte { flex: 0 0 calc(50% - 12px); }
  .arguments { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); }
  .pied-haut { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .formulaire-newsletter { flex-direction: row; }
  .formulaire-newsletter input { flex: 1; }
  .attente .formulaire-newsletter { flex-direction: column; }
}

/* ==========================================================================
   Palier maquette — à 1024 px, le rendu reprend les valeurs relevées.
   ========================================================================== */

@media (min-width: 1024px) {
  .contenant { padding: 0 var(--marge); }
  body { font-size: var(--t-courant); }

  .entete { padding: 26px 0; }
  .logo img { width: 200px; }
  .navigation { gap: 38px; font-size: var(--t-courant); }

  .heros { padding: 50px 0 60px; }
  .pastille { font-size: 24px; padding: 8px 22px; }
  .heros h1 { font-size: var(--t-h1); margin: 30px 0 24px; }
  .chapo { font-size: var(--t-chapo); }

  .sejours { padding: 34px 0; }
  .rangee-cartes {
    gap: var(--gouttiere);
    margin: 0 calc(var(--marge) * -1);
    padding: 0 var(--marge) 4px;
    scroll-padding-left: var(--marge);
  }
  .carte { flex: 0 0 calc(50% - var(--gouttiere) / 2); }
  .carte-meta { padding: 16px 22px 14px; font-size: var(--t-carte); }
  .carte-corps { padding: 22px 22px 26px; }
  .carte h3 { font-size: var(--t-h3); }
  .carte-programme, .carte-details { font-size: var(--t-carte); }
  .prix { font-size: var(--t-prix); }
  .bouton { font-size: var(--t-courant); padding: 13px 26px; }

  .pourquoi { padding: 46px 0 56px; }
  .pourquoi h2, .marche h2, .pied h2 { font-size: var(--t-h2); }
  .arguments { gap: 30px 46px; }
  .argument { font-size: var(--t-courant); }
  .argument img { width: 96px; height: 96px; }

  .newsletter { padding: 43px 0; }
  .newsletter p { font-size: var(--t-h2); }
  .formulaire-newsletter input { font-size: var(--t-h2); padding: 20px 16px; }
  .newsletter .bouton { font-size: 29px; padding: 18px 34px; }

  .marche { padding: 46px 0 56px; }
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .etape { flex-direction: column; gap: 22px; font-size: var(--t-courant); }
  .etape::before { width: 60px; height: 60px; font-size: var(--t-etape); }

  /* Le trait pointillé qui relie les pastilles, comme dans la maquette. */
  .etape::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 72px;
    width: calc(100% - 72px + 30px);
    border-top: 3px dotted var(--vert);
  }
  .etape:last-child::after { content: none; }

  html { scroll-padding-top: 112px; }

  .detail-prix { font-size: 17px; }

  .manifeste, .pied-bas { font-size: var(--t-courant); }
  .pied-identite { font-size: 15px; }
  .courriel { font-size: var(--t-courant); }
  .bloc-instagram { padding: 30px; min-height: 308px; }
  .bloc-instagram span { font-size: var(--t-h2); }
  .attente h1 { font-size: 64px; }
}

/* ==========================================================================
   Classes du socle — employées par les pages de réponse de `contact.php`
   et par l'éditeur de textes. Elles n'apparaissent pas dans le prototype :
   elles habillent des écrans que la maquette ne montrait pas.
   ========================================================================== */

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 60px 20px;
}

.encadre {
  border-left: 4px solid var(--vert);
  background: #FFFFFF;
  border-radius: var(--rayon-bouton);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.encadre--erreur { border-left-color: var(--corail); }
.encadre h1 { font-size: 27px; margin-bottom: 12px; }
.encadre p + p { margin-top: 12px; }
.encadre a { font-family: var(--titre); font-weight: 700; }

/* --- Mentions légales ---------------------------------------------------- */

.legales { padding: 40px 0 60px; }
.legales h1 { font-size: 34px; margin-bottom: 28px; }
.legales h2 { font-size: 22px; margin: 34px 0 12px; }
.legales p { margin-bottom: 12px; max-width: 38em; }
.legales a { font-weight: 600; }

@media (min-width: 1024px) {
  .legales { padding: 56px 0 80px; }
  .legales h1 { font-size: var(--t-h1); }
  .legales h2 { font-size: var(--t-h2); }
}