/* ==========================================================================
   rogetjules.fr — feuille de style unique, partagée par toutes les pages
   Direction artistique : Méditerranée catalane
   Ordre : 1. Tokens · 2. Polices · 3. Base · 4. Utilitaires · 5. Composants
           6. Modèles de section · 7. Accueil · 8. Pied de page
           9. Apparitions · 10. Responsive
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS — ne pas ajouter d'autre couleur
   -------------------------------------------------------------------------- */
:root {
  /* Fonds */
  --creme: #F4EADB;          /* fond principal */
  --creme-clair: #FBF4E9;    /* sections alternées, cartes, pastilles */
  --blanc-chaud: #FFFBF5;    /* champs de formulaire */
  --terre-cuite: #B04E26;    /* boutons principaux, bande « Le photographe », formule Complète */
  --bleu-mer: #1E5C78;       /* liens, bande « Avis » */
  --brun: #2B201A;           /* texte principal, pied de page */

  /* Variantes */
  --terre-cuite-fonce: #8F3D1B;  /* survol des boutons */
  --terre-cuite-texte: #A84A23;  /* sur-titres et petits textes terre cuite sur crème */
  --bleu-mer-fonce: #123F54;     /* survol des liens */
  --ocre: #D9A441;               /* soleils, puces, guillemet */
  --ocre-texte: #8C6418;         /* titre « Tourisme et collectivités » */
  --ocre-clair: #F9D9A0;         /* sur-titres et notes sur terre cuite ou bleu */
  --ocre-pale: #F7D9A8;          /* italique du titre d'ouverture */
  /* Ocre clair éclairci pour les PETITS textes sur terre cuite :
     #F9D9A0 n'y atteint que 3,9:1 (et #FCE4BC 4,3:1). #FDECCF atteint 4,56:1. */
  --ocre-clair-petit: #FDECCF;

  /* Textes */
  --brun-moyen: #55463B;         /* texte courant */
  --brun-doux: #6B5A4C;          /* légendes, signature du logo, petites notes */
  --texte-sur-terre-cuite: #FFF8EF;
  --texte-sur-terre-cuite-2: #FFEBDD;
  --texte-sur-bleu: #FBF4E9;
  --texte-sur-bleu-2: #BFD3DD;
  --texte-pied: #E9DCCB;
  --texte-pied-2: #BFA98F;

  /* Traits */
  --sable: #D9C7AE;              /* bordures des champs, fil des étapes */
  --sable-clair: #E6D6BE;        /* bordure du header, carte Essentielle */
  --filet-pied: #4A3B31;

  /* Polices */
  --police-titre: 'Fraunces', Georgia, serif;
  --police-texte: 'Work Sans', system-ui, sans-serif;
  --police-main: 'Caveat', cursive;

  /* Formes */
  --rayon-pilule: 999px;
  --rayon-arche: 999px 999px 0 0;
  --rayon-carte: 22px;
  --rayon-photo: 20px;
  --rayon-champ: 12px;

  /* Mise en page */
  --largeur-max: 1280px;
  --marge-laterale: 48px;
  --section-y: 120px;
  --ecart-grille: 40px;
  --hauteur-entete: 96px;

  /* Ombres (les deux seules du site) */
  --ombre-entete: 0 4px 18px rgba(43, 32, 26, .08);
  --ombre-barre: 0 -6px 22px rgba(43, 32, 26, .12);
}

@media (max-width: 899px) {
  :root {
    --marge-laterale: 20px;
    --section-y: 72px;
    --ecart-grille: 20px;
    --hauteur-entete: 72px;
  }
}


/* --------------------------------------------------------------------------
   2. POLICES — auto-hébergées (RGPD), sous-ensemble latin
   Fichiers à placer dans v2/fonts/ (script : fonts/telecharger-polices.command)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-romain.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-italique.woff2') format('woff2');
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans-500.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans-600.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-500.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  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;
}


/* --------------------------------------------------------------------------
   3. BASE — reset léger et typographie
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px; /* hauteur du header réduit */
}

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--brun);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: normal;
}

h1, h2, h3, p, figure, blockquote {
  margin: 0;
}

p {
  line-height: 1.7;
}

/* Petits libellés : interligne « normal », comme sur la maquette */
.surtitre,
.carte-formule__surtitre,
.avis__signature,
.avis__exemple,
.references__libelle,
.formulaire__telephone,
.pied__nom,
.pied__texte,
.pied__bas-ligne p {
  line-height: normal;
}

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

/* <picture> ne crée pas de boîte : on stylise directement l'<img> */
picture {
  display: contents;
}

a {
  color: var(--bleu-mer);
}
a:hover {
  color: var(--bleu-mer-fonce);
}

button,
input,
textarea {
  font: inherit;
}

/* Focus visible partout */
:focus-visible {
  outline: 2px solid var(--bleu-mer);
  outline-offset: 2px;
}
.plein-ecran :focus-visible,
.section--terre-cuite :focus-visible,
.section--bleu :focus-visible,
.pied :focus-visible {
  outline-color: var(--creme-clair);
}


/* --------------------------------------------------------------------------
   4. UTILITAIRES
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--marge-laterale);
}
.conteneur--etroit {
  max-width: 980px;
}

/* Masqué à l'écran, lu par les lecteurs d'écran */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement */
.lien-evitement {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--rayon-pilule);
  background: var(--brun);
  color: var(--creme-clair);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus {
  top: 16px;
  color: var(--creme-clair);
}

/* Sur-titre : petit texte en majuscules au-dessus des titres */
.surtitre {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terre-cuite-texte);
}
.surtitre--clair {
  color: var(--ocre-clair-petit);
}

/* Titre de section (H2) */
.titre-section {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.05;
}
.titre-section em {
  font-style: italic;
  color: var(--terre-cuite);
}
.titre-section--etapes {
  font-size: clamp(34px, 3.6vw, 52px);
}
.titre-section--contact {
  font-size: clamp(38px, 4.45vw, 64px);
  line-height: 1;
}

/* Petite note d'ambiance : italique Fraunces (plus lisible que l'écriture
   manuscrite Caveat, jugée difficile à lire). 6 mots maximum. */
.note-main {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

/* En-têtes de section */
.en-tete-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.en-tete-section--centre {
  align-items: center;
  text-align: center;
}
.en-tete-section--ligne {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}


/* --------------------------------------------------------------------------
   5. COMPOSANTS
   -------------------------------------------------------------------------- */

/* 5.1 Header : signature au centre, pages à gauche et à droite ---------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme);
  border-bottom: 1px solid var(--sable-clair);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.entete__barre {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--hauteur-entete);
  padding: 0 40px;
  transition: height .25s ease;
}
.entete--reduite {
  box-shadow: var(--ombre-entete);
}
.entete--reduite .entete__barre {
  height: 76px;
}

.nav-principale {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 56px;
  width: 100%;
  max-width: var(--largeur-max);
}
.nav-principale__liste {
  display: flex;
  gap: 36px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principale__liste--gauche {
  justify-content: flex-end;
}
.nav-principale__liste--droite {
  justify-content: flex-start;
}
.nav-principale__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--brun);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-principale__lien::after { /* fin soulignement au survol */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-principale__lien:hover,
.nav-principale__lien[aria-current="page"] {
  color: var(--terre-cuite-texte);
}
.nav-principale__lien:hover::after,
.nav-principale__lien[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav-principale__lien svg { /* icône « Galeries clients » */
  flex: none;
  width: 16px;
  height: 16px;
}

/* La signature, au centre */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--brun);
  text-align: center;
  text-decoration: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.logo:hover {
  color: var(--brun);
}
/* Le logo (dessiné par Jules : appareil photo + signature) */
.logo__image {
  display: block;
  width: auto;
  height: 76px;
  transition: height .25s ease;
}
.entete--reduite .logo__image {
  height: 60px;
}
.logo__nom {
  font-family: var(--police-titre);
  font-size: 32px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}
.logo__signature {
  padding-left: .32em; /* recentre le texte espacé */
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brun-doux);
  font-weight: 500;
}

/* Boutons du header sur téléphone (galeries + menu) */
.entete__mobile {
  display: none;
  align-items: center;
  gap: 10px;
}

/* Bouton rond (menu, fermer, galeries) */
.bouton-rond {
  display: inline-flex;
  flex: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bouton-rond:hover {
  background: var(--terre-cuite-fonce);
  color: var(--texte-sur-terre-cuite);
}
.bouton-rond svg {
  width: 20px;
  height: 20px;
}
.bouton-rond--contour {
  background: transparent;
  border: 1.5px solid var(--terre-cuite);
  color: var(--terre-cuite-texte);
}
.bouton-rond--contour:hover {
  background: var(--terre-cuite);
  border-color: var(--terre-cuite);
}

/* Accueil : header transparent posé sur le diaporama, plein au défilement.
   (Seulement si JavaScript est actif : sinon le header reste plein.) */
.js .page-accueil .entete {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.js .page-accueil .entete:not(.entete--pleine) {
  background: transparent;
  border-bottom-color: transparent;
}
.js .page-accueil .entete:not(.entete--pleine) .nav-principale__lien {
  color: var(--creme-clair);
  text-shadow: 0 1px 12px rgba(43, 32, 26, .35);
}
.js .page-accueil .entete:not(.entete--pleine) .nav-principale__lien:hover {
  color: var(--ocre-pale);
}
.js .page-accueil .entete:not(.entete--pleine) .logo { /* le grand nom de l'ouverture suffit */
  opacity: 0;
  visibility: hidden;
}
.js .page-accueil .entete:not(.entete--pleine) .bouton-rond--contour {
  border-color: rgba(251, 244, 233, .85);
  color: var(--creme-clair);
}

/* 5.2 Menu téléphone ---------------------------------------------------------- */
.menu-mobile {
  display: none;
}

/* 5.3 Boutons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: var(--rayon-pilule);
  border: 0;
  font-family: var(--police-texte);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--principal {
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
}
.btn--principal:hover {
  background: var(--terre-cuite-fonce);
  color: var(--texte-sur-terre-cuite);
}
.btn--fantome {
  background: transparent;
  border: 1.5px solid rgba(251, 244, 233, .85);
  color: var(--creme-clair);
}
.btn--fantome:hover {
  background: rgba(251, 244, 233, .14);
  color: var(--creme-clair);
}
.btn--contour {
  background: transparent;
  border: 1.5px solid var(--terre-cuite);
  color: var(--terre-cuite-texte);
}
.btn--contour:hover {
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
}
.btn--petit {
  min-height: 46px;
  padding: 0 24px;
  font-size: 14px;
}

.lien {
  font-size: 15px;
  font-weight: 600;
  color: var(--bleu-mer);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color .2s ease;
}
.lien:hover {
  color: var(--bleu-mer-fonce);
}
/* Zone cliquable agrandie (44 px de haut) sans changer la mise en page :
   le padding vertical d'un élément en ligne ne pousse pas les lignes. */
a.lien,
.nav-principale__lien,
.formulaire__telephone a {
  padding-block: 12px;
}
.lien--clair {
  color: var(--texte-sur-terre-cuite);
}
.lien--clair:hover {
  color: var(--creme-clair);
}

/* 5.4 Badge ----------------------------------------------------------------- */
.badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 7px 14px;
  border-radius: var(--rayon-pilule);
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* 5.5 Carte univers ------------------------------------------------------------ */
.carte-univers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--brun);
  text-decoration: none;
}
.carte-univers:hover {
  color: var(--brun);
}
.carte-univers__photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rayon-arche);
  aspect-ratio: 368 / 470;
}
.carte-univers__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.carte-univers:hover .carte-univers__photo img {
  transform: scale(1.02);
}
.carte-univers__titre {
  margin-top: 6px;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
}
.carte-univers--mariages .carte-univers__titre { color: var(--terre-cuite); }
.carte-univers--sport .carte-univers__titre { color: var(--bleu-mer); }
.carte-univers--tourisme .carte-univers__titre { color: var(--ocre-texte); }
.carte-univers__texte {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brun-moyen);
}
.carte-univers--sport .carte-univers__photo img {
  object-position: 58% 50%;
}
.carte-univers:hover .lien {
  color: var(--bleu-mer-fonce);
}

/* Repères du carrousel (téléphone uniquement) */
.reperes {
  display: none;
}

/* 5.6 Carte formule ---------------------------------------------------------- */
.carte-formule {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: var(--rayon-carte);
}
.carte-formule__surtitre {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brun-doux);
}
.carte-formule__nom {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
}
.carte-formule__note {
  font-size: 18px;
  line-height: 1.2;
}
.carte-formule--essentielle {
  background: var(--creme-clair);
  border: 1px solid var(--sable-clair);
}
.carte-formule--essentielle .carte-formule__note { color: var(--bleu-mer); }
.carte-formule--essentielle .liste-puces { color: var(--brun-moyen); }
.carte-formule--complete {
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
}
.carte-formule--complete .carte-formule__surtitre,
.carte-formule--complete .carte-formule__note { color: var(--ocre-clair-petit); }
.carte-formule--complete .liste-puces { color: var(--texte-sur-terre-cuite-2); }

/* 5.7 Puce ocre et liste ----------------------------------------------------- */
.liste-puces {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.liste-puces li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
}
.liste-puces li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ocre);
  transform: translateY(-2px);
}

/* 5.8 Étapes ------------------------------------------------------------------ */
.etapes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapes::before { /* le fil qui relie les cercles */
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: var(--sable);
}
.etape {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 22px;
  align-items: start;
}
.etape__numero { /* le cercle numéroté */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--creme-clair);
  border: 1.5px solid var(--terre-cuite);
  color: var(--terre-cuite-texte);
  font-family: var(--police-titre);
  font-size: 20px;
}
.etape--derniere .etape__numero {
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
}
.etape__corps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.etape__titre {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
}
.etape__texte {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brun-moyen);
}

/* 5.9 Vignette portfolio ------------------------------------------------------ */
.vignette {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vignette img {
  width: 100%;
  aspect-ratio: 17 / 20;
  object-fit: cover;
  border-radius: var(--rayon-photo);
}
.vignette figcaption {
  font-size: 14px;
  color: var(--brun-doux);
}

/* 5.10 Pastille manuscrite (sur les photos demi-écran) ----------------------- */
.pastille {
  position: absolute;
  left: 32px;
  bottom: 30px;
  z-index: 1;
  padding: 8px 18px;
  border-radius: var(--rayon-pilule);
  background: var(--creme-clair);
  color: var(--brun);
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
}
.pastille--droite {
  left: auto;
  right: 32px;
}

/* 5.11 Soleil ---------------------------------------------------------------- */
.soleil {
  position: absolute;
  border-radius: 50%;
  background: var(--ocre);
  pointer-events: none;
}

/* 5.12 Formulaire : puces de choix ------------------------------------------ */
.groupe-puces {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.groupe-puces[hidden] {
  display: none;
}
.groupe-puces legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--brun);
}
.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.puce-choix {
  position: relative;
  display: inline-flex;
}
.puce-choix input { /* vrai bouton radio, masqué visuellement */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.puce-choix span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--sable);
  background: var(--blanc-chaud);
  font-size: 14px;
  font-weight: 500;
  color: var(--brun);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.puce-choix input:checked + span {
  background: var(--brun);
  border-color: var(--brun);
  color: var(--creme-clair);
}
.puce-choix input:focus-visible + span {
  outline: 2px solid var(--bleu-mer);
  outline-offset: 2px;
}

/* 5.13 Formulaire : champs ---------------------------------------------------- */
.grille-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.champ--large {
  grid-column: 1 / -1;
}
.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.champ label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brun);
}
.champ input,
.champ textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--sable);
  border-radius: var(--rayon-champ);
  background: var(--blanc-chaud);
  color: var(--brun);
  font-family: var(--police-texte);
  font-size: 16px; /* 16 px minimum : pas de zoom automatique sur iPhone */
  -webkit-appearance: none;
  appearance: none;
}
.champ input[type="date"] {
  display: flex;
  align-items: center;
}
.champ textarea {
  min-height: 120px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}
.champ input::placeholder,
.champ textarea::placeholder {
  color: var(--brun-doux);
  opacity: .75;
}
.champ input:focus,
.champ textarea:focus {
  outline: 2px solid var(--bleu-mer);
  outline-offset: 1px;
}
.champ--erreur input,
.champ--erreur textarea {
  border-color: var(--terre-cuite);
}
.champ__erreur {
  font-size: 13px;
  line-height: 1.4;
  color: var(--terre-cuite-texte);
}
.champ__erreur:empty {
  display: none;
}

/* 5.14 Barre d'action téléphone ---------------------------------------------- */
.barre-mobile {
  display: none;
}


/* --------------------------------------------------------------------------
   6. MODÈLES DE SECTION
   A. Plein écran · B. Grille centrée · C. Bande pleine · D. Écran coupé
   -------------------------------------------------------------------------- */

/* B et C : sections à conteneur */
.section {
  padding: var(--section-y) 0;
}
.section--creme { background: var(--creme); }
.section--creme-clair { background: var(--creme-clair); }
.section--terre-cuite {
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
}
.section--bleu {
  background: var(--bleu-mer);
  color: var(--texte-sur-bleu);
}

/* A. Plein écran (l'ouverture) */
.plein-ecran {
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--hauteur-entete));
  height: calc(100svh - var(--hauteur-entete));
  min-height: 560px;
  color: var(--creme-clair);
}
.js .page-accueil .plein-ecran { /* le header est posé dessus */
  height: 100vh;
  height: 100svh;
}
.plein-ecran::before { /* voiles : haut (lisibilité du menu), centre (nom), bas */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(43, 32, 26, .45) 0%, rgba(43, 32, 26, 0) 22%),
    linear-gradient(0deg, rgba(43, 32, 26, .45) 0%, rgba(43, 32, 26, 0) 30%),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(43, 32, 26, .42), rgba(43, 32, 26, .12));
}

/* D. Écran coupé (photo à gauche par défaut) */
.ecran-coupe {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ecran-coupe__photo {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
.ecran-coupe__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ecran-coupe__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 120px 96px;
  /* Au-delà de 1440 px, le côté extérieur s'élargit pour garder
     la même largeur de texte que sur la maquette (528 px). */
  padding-right: max(96px, 50vw - 624px);
}
.ecran-coupe--image-droite .ecran-coupe__photo {
  order: 2;
}
.ecran-coupe--image-droite .ecran-coupe__texte {
  padding-right: 96px;
  padding-left: max(96px, 50vw - 624px);
}


/* --------------------------------------------------------------------------
   7. PAGE D'ACCUEIL
   -------------------------------------------------------------------------- */

/* 7.1 Ouverture : ton nom + tes photos qui défilent ---------------------------- */
.diaporama {
  --duree-diapo: 5s; /* temps d'affichage de chaque photo */
  position: absolute;
  inset: 0;
}
.diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.diapo--active {
  opacity: 1;
}
.diapo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ligne de chargement en haut de l'écran */
.diaporama__progression {
  position: absolute;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(251, 244, 233, .2);
}
.diaporama__barre {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--creme-clair);
  transform: scaleX(0);
  transform-origin: left;
}
.diaporama__barre--anime {
  animation: progression-diapo var(--duree-diapo, 6s) linear forwards;
}
.diaporama--pause .diaporama__barre--anime {
  animation-play-state: paused;
}
@keyframes progression-diapo {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Le nom, au centre */
.ouverture__contenu {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}
.ouverture__titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
}
.ouverture__nom {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--police-titre);
  font-size: clamp(64px, 9.6vw, 150px);
  line-height: .9;
  letter-spacing: -.02em;
  text-shadow: 0 2px 40px rgba(43, 32, 26, .35);
}
.ouverture__ligne {
  display: block;
}
.ouverture__logo {
  width: clamp(280px, 36vw, 540px);
  height: auto;
  /* fin liseré sombre + halo : le trait reste lisible même sur une photo chargée */
  filter: drop-shadow(0 0 1.5px rgba(43, 32, 26, .6)) drop-shadow(0 2px 26px rgba(43, 32, 26, .5));
}
.ouverture__metier {
  display: block;
  margin-top: 28px;
  padding-left: .32em;
  font-family: var(--police-texte);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(43, 32, 26, .5);
}

.insecable {
  white-space: nowrap;
}

/* Apparition douce du nom au chargement */
@keyframes apparition-titre {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.ouverture__ligne,
.ouverture__metier {
  animation: apparition-titre 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.ouverture__ligne:first-child { animation-delay: .25s; }
.ouverture__ligne + .ouverture__ligne { animation-delay: .45s; }
.ouverture__metier { animation-delay: .85s; }

/* Bouton pause / lecture du diaporama */
.diaporama__pause {
  position: absolute;
  z-index: 3;
  right: 32px;
  bottom: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(251, 244, 233, .6);
  border-radius: 50%;
  background: rgba(43, 32, 26, .15);
  color: var(--creme-clair);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.js .diaporama__pause {
  display: flex;
}
.diaporama__pause:hover {
  border-color: var(--creme-clair);
  background: rgba(43, 32, 26, .3);
}
.diaporama__pause svg {
  width: 16px;
  height: 16px;
}
.diaporama__pause .icone-lecture,
.diaporama__pause[aria-pressed="true"] .icone-pause {
  display: none;
}
.diaporama__pause[aria-pressed="true"] .icone-lecture {
  display: block;
}

/* Lien « Défiler » */
.ouverture__defiler {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--creme-clair);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
}
.ouverture__defiler:hover {
  color: var(--creme-clair);
}
.ouverture__defiler::after {
  content: "";
  width: 1px;
  height: 40px;
  background: rgba(251, 244, 233, .75);
}

/* 7.2 Trois univers ---------------------------------------------------------- */
.univers {
  padding: 120px 0 110px;
}
.univers__interieur {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.univers__note {
  font-size: 22px;
  color: var(--bleu-mer);
}
.grille-univers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ecart-grille);
}
.univers__actions {
  display: flex;
  justify-content: center;
}

/* 7.3 Mariages ---------------------------------------------------------------- */
.mariages__intro {
  font-size: 18px;
  line-height: 1.75;
  color: var(--brun-moyen);
}
.grille-formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.note-deplacement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brun-doux);
}
.note-deplacement svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--terre-cuite-texte);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
}

/* 7.4 Le photographe ---------------------------------------------------------- */
.photographe {
  overflow-x: clip;
}
.photographe__interieur {
  display: flex;
  gap: 90px;
  align-items: center;
}
.photographe__visuel {
  position: relative;
  flex: none;
  width: 440px;
  aspect-ratio: 440 / 610;
}
.soleil--portrait {
  right: -44px;
  top: -34px;
  width: 170px;
  height: 170px;
}
.photographe__visuel img { /* l'arche cadre */
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 10px solid var(--creme);
  border-radius: 220px 220px 6px 6px;
}
.photographe__texte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.photographe__paragraphe {
  font-size: 17px;
  line-height: 1.8;
  color: var(--texte-sur-terre-cuite-2);
}
.points-cles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 6px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 248, 239, .35);
  list-style: none;
}
.point-cle {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.point-cle__titre {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
}
.point-cle__texte {
  font-size: 14px;
  line-height: 1.55;
  color: var(--texte-sur-terre-cuite-2);
}
.photographe__suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

/* 7.5 Portfolio --------------------------------------------------------------- */
.portfolio {
  padding: 120px 0 130px;
}
.portfolio__interieur {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.grille-portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}
.grille-portfolio > :nth-child(3n + 2) { /* la colonne du milieu descend */
  translate: 0 48px;
}
.portfolio__actions {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* 7.6 Comment ça se passe ------------------------------------------------------ */
.deroulement .ecran-coupe__texte {
  gap: 34px;
}
.deroulement .en-tete-section {
  gap: 14px;
}
.deroulement .ecran-coupe__photo img {
  object-position: 68% 50%;
}

/* 7.7 Avis et références -------------------------------------------------------- */
.avis {
  padding: 120px 0 90px;
}
.avis__citation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.guillemet {
  height: 44px;
  font-family: var(--police-titre);
  font-size: 110px;
  line-height: .5;
  color: var(--ocre);
}
.avis__texte p {
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.4;
}
.avis__signature {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ocre-clair);
}
.avis__exemple {
  font-size: 12px;
  color: var(--texte-sur-bleu-2);
}
.references {
  margin-top: 80px;
}
.references__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 44px;
  margin: 0;
  padding: 36px 0 0;
  border-top: 1px solid rgba(251, 244, 233, .25);
  list-style: none;
}
.references__libelle {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texte-sur-bleu-2);
}
.references__nom {
  font-family: var(--police-titre);
  font-size: 21px;
}

/* Deux avis côte à côte */
.avis__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.avis__grille .avis__citation {
  margin: 0;
}
.avis__grille .avis__texte p {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.5;
}
.avis__lieu {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--texte-sur-bleu-2);
}

/* Logos des clients (version claire, une seule couleur) */
.references__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 56px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.references__logo img {
  display: block;
  width: var(--l);
  height: auto;
  opacity: .88;
}
.references > .references__libelle {
  padding-top: 36px;
  border-top: 1px solid rgba(251, 244, 233, .25);
  text-align: center;
}

/* 7.8 Contact ------------------------------------------------------------------- */
.contact .ecran-coupe__photo img {
  object-position: 50% 60%;
}
.contact__texte {
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
  padding-top: 110px;
  padding-bottom: 110px;
}
.soleil--contact {
  right: -150px;
  top: -150px;
  width: 380px;
  height: 380px;
  opacity: .85;
}
.contact__en-tete {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact__note {
  font-size: 23px;
  line-height: 1.2;
  color: var(--terre-cuite-texte);
}
.contact__intro {
  max-width: 500px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--brun-moyen);
}
.formulaire {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.formulaire[hidden] {
  display: none;
}
.formulaire__envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.formulaire__telephone {
  font-size: 14px;
  color: var(--brun-doux);
}
.formulaire__telephone a {
  color: var(--brun);
  font-weight: 600;
  text-decoration: none;
}
.formulaire__telephone a:hover {
  color: var(--terre-cuite-texte);
}
.formulaire__alerte {
  font-size: 14px;
  line-height: 1.6;
  color: var(--terre-cuite-texte);
}
.formulaire__alerte:empty {
  display: none;
}
.piege { /* champ anti-spam, invisible pour les humains */
  display: none;
}
.confirmation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: var(--rayon-carte);
  background: var(--creme-clair);
  border: 1px solid var(--sable-clair);
}
.confirmation[hidden] {
  display: none;
}
.confirmation__note {
  font-size: 21px;
  line-height: 1.2;
  color: var(--bleu-mer);
}
.confirmation__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
}
.confirmation__texte {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brun-moyen);
}


/* --------------------------------------------------------------------------
   8. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied {
  padding: 80px 0 34px;
  background: var(--brun);
  color: var(--texte-pied);
}
.pied a {
  color: var(--texte-pied);
  font-size: 15px;
  text-decoration: none;
}
.pied__liste a,
.pied__legal a {
  padding-block: 6px; /* zone cliquable de 30 px sans chevauchement (écart de la maquette) */
}
.pied a:hover {
  color: var(--creme-clair);
  text-decoration: underline;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 48px;
}
.pied__colonne {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pied__colonne--marque,
.pied__colonne--clients {
  gap: 14px;
}
.pied__nom {
  font-family: var(--police-titre);
  font-size: 30px;
  font-weight: 500;
  color: var(--creme-clair);
}
.pied__logo {
  display: block;
  width: 180px;
  height: auto;
}
.pied__presentation {
  max-width: 340px;
  font-size: 15px;
  line-height: 1.7;
}
.pied__note {
  font-size: 19px;
  color: var(--ocre);
}
.pied__titre {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texte-pied-2);
}
.pied__liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied__texte {
  font-size: 15px;
}
.pied__texte--long {
  line-height: 1.6;
}
.pied .pied__bouton {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--rayon-pilule);
  border: 1.5px solid var(--texte-pied);
  font-weight: 600;
}
.pied__bas {
  margin-top: 64px;
}
.pied__bas-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--filet-pied);
  font-size: 13px;
  color: var(--texte-pied-2);
}
.pied__legal {
  display: flex;
  gap: 24px;
}
.pied .pied__legal a {
  font-size: 13px;
}


/* --------------------------------------------------------------------------
   9. APPARITIONS DOUCES (seulement si JavaScript est actif)
   -------------------------------------------------------------------------- */
.js [data-apparition] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--delai, 0ms);
}
.js [data-apparition].est-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fondu img {
    transition: none;
  }
  .js [data-apparition] {
    opacity: 1;
    transform: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  *:not(.diaporama__barre),
  *::before,
  *::after {
    animation: none !important;
  }
  /* Le diaporama ne démarre pas tout seul (script) ; s'il est lancé à la main,
     la ligne de chargement reste animée pour faire avancer les photos. */
  .carte-univers:hover .carte-univers__photo img {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE
   ≥ 1200 : maquette · 900–1199 : mêmes mises en page resserrées
   600–899 : header téléphone, écrans coupés empilés · < 600 : maquettes téléphone
   -------------------------------------------------------------------------- */

/* 900 à 1199 px ------------------------------------------------------------- */
@media (max-width: 1199px) {
  .entete__barre {
    padding: 0 28px;
  }
  .nav-principale {
    column-gap: 32px;
  }
  .nav-principale__liste {
    gap: 22px;
  }
  .nav-principale__lien {
    font-size: 14px;
  }
  .logo__nom {
    font-size: 28px;
  }
  .ecran-coupe__texte,
  .ecran-coupe--image-droite .ecran-coupe__texte {
    padding-left: 56px;
    padding-right: 56px;
  }
  .grille-univers {
    gap: 28px;
  }
  .grille-portfolio {
    column-gap: 28px;
  }
  .photographe__interieur {
    gap: 56px;
  }
  .photographe__visuel {
    width: clamp(300px, 34vw, 440px);
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .nav-principale {
    column-gap: 24px;
  }
  .nav-principale__liste {
    gap: 18px;
  }
  .nav-principale__lien svg {
    display: none;
  }
}

/* Moins de 900 px : version téléphone et tablette ------------------------------ */
@media (max-width: 899px) {
  html {
    scroll-padding-top: 60px;
  }

  /* Header téléphone : signature à gauche, galeries + menu à droite */
  .entete__barre {
    justify-content: space-between;
    padding: 0 20px;
  }
  .entete--reduite {
    border-bottom-color: transparent; /* l'ombre suffit (maquette) */
  }
  .entete--reduite .entete__barre {
    height: 60px;
  }
  .nav-principale {
    display: block;
    width: auto;
  }
  .nav-principale__liste {
    display: none;
  }
  .logo {
    align-items: flex-start;
    gap: 4px;
    text-align: left;
  }
  .logo__nom {
    font-size: 24px;
  }
  .logo__signature {
    padding-left: 0;
    font-size: 9px;
    letter-spacing: .24em;
  }
  .entete--reduite .logo__nom {
    font-size: 22px;
  }
  .entete--reduite .logo__signature {
    display: none;
  }
  .logo__image {
    height: 54px;
  }
  .entete--reduite .logo__image {
    height: 46px;
  }
  .entete__mobile {
    display: flex;
  }

  /* Menu téléphone (panneau plein écran) */
  .menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0 20px calc(28px + env(safe-area-inset-bottom));
    background: var(--creme);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .menu-mobile--ouvert {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s;
  }
  .menu-mobile__haut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    height: 72px;
  }
  .menu-mobile__liens {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
  }
  .menu-mobile__liens a {
    font-family: var(--police-titre);
    font-size: 32px;
    line-height: 1.15;
    color: var(--brun);
    text-decoration: none;
  }
  .menu-mobile__liens a:hover {
    color: var(--terre-cuite-texte);
  }
  .menu-mobile__bas {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
    padding-top: 40px;
  }
  .menu-mobile__bas .btn {
    width: 100%;
  }
  .menu-mobile__bas .lien {
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .menu-ouvert {
    overflow: hidden;
  }

  /* A. Ouverture */
  .plein-ecran {
    min-height: 520px;
  }
  .ouverture__sep {
    display: none;
  }
  .ouverture__lieu { /* sur téléphone, le lieu passe sur sa propre ligne */
    display: block;
    margin-top: 6px;
  }
  .ouverture__metier {
    margin-top: 20px;
    padding-left: .24em;
    font-size: 10.5px;
    letter-spacing: .24em;
  }
  .diaporama__pause {
    right: 16px;
    bottom: 16px;
  }
  .ouverture__defiler { /* réduit au seul trait, zone tactile de 44 px */
    bottom: 0;
    justify-content: flex-end;
    width: 44px;
    height: 58px;
    padding-bottom: 14px;
    gap: 0;
  }
  .ouverture__defiler-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ouverture__defiler::after {
    height: 28px;
    background: rgba(251, 244, 233, .7);
  }

  /* B. Sections */
  .surtitre {
    font-size: 11px;
  }
  .univers {
    padding: var(--section-y) 0;
  }
  .univers__interieur {
    gap: 22px;
  }
  .univers .en-tete-section {
    gap: 6px;
  }
  .univers .titre-section {
    line-height: 1.08;
  }
  .univers__note {
    font-size: 19px;
  }

  /* Carrousel des univers */
  .grille-univers {
    display: flex;
    gap: 14px;
    margin: 0 calc(var(--marge-laterale) * -1);
    padding: 0 var(--marge-laterale);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--marge-laterale);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .grille-univers::-webkit-scrollbar {
    display: none;
  }
  .carte-univers {
    flex: none;
    width: 286px;
    gap: 10px;
    scroll-snap-align: start;
  }
  .carte-univers__photo {
    aspect-ratio: auto;
    height: 330px;
  }
  .carte-univers__titre {
    margin-top: 0;
    font-size: 26px;
  }
  .carte-univers__texte {
    font-size: 14px;
    line-height: 1.55;
  }
  .badge {
    left: 14px;
    bottom: 14px;
    padding: 6px 12px;
    font-size: 10px;
  }
  .reperes {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .repere {
    width: 6px;
    height: 6px;
    border-radius: var(--rayon-pilule);
    background: var(--sable);
    transition: width .25s ease, background-color .25s ease;
  }
  .repere--actif {
    width: 22px;
    background: var(--terre-cuite);
  }

  /* D. Écrans coupés : photo au-dessus, texte dessous */
  .ecran-coupe {
    grid-template-columns: 1fr;
  }
  .ecran-coupe--image-droite .ecran-coupe__photo {
    order: 0;
  }
  .ecran-coupe__photo {
    min-height: 0;
    height: min(62vw, 320px);
  }
  .ecran-coupe__texte,
  .ecran-coupe--image-droite .ecran-coupe__texte {
    padding: 24px 20px 56px;
  }
  .pastille {
    left: 16px;
    bottom: 16px;
    padding: 6px 14px;
    font-size: 16px;
  }
  .pastille--droite {
    left: auto;
    right: 16px;
  }
  .mariages .ecran-coupe__photo img {
    object-position: 50% 40%;
  }
  .mariages__intro {
    font-size: 16px;
    line-height: 1.7;
  }

  /* C. Le photographe */
  .photographe__interieur {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }
  .photographe__visuel {
    width: 78%;
    max-width: 340px;
    align-self: center;
  }
  .soleil--portrait {
    right: -30px;
    top: -24px;
    width: 120px;
    height: 120px;
  }
  .photographe__paragraphe {
    font-size: 16px;
    line-height: 1.75;
  }
  .points-cles {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .point-cle__titre {
    font-size: 22px;
  }
  
  /* B. Portfolio */
  .portfolio {
    padding: var(--section-y) 0;
  }
  .portfolio__interieur {
    gap: 32px;
  }
  .en-tete-section__lien {
    display: none;
  }
  .grille-portfolio {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .grille-portfolio > :nth-child(3n + 2) {
    translate: none;
  }
  .vignette figcaption {
    font-size: 13px;
  }
  .portfolio__actions {
    margin-top: 8px;
  }

  /* Étapes */
  .deroulement .ecran-coupe__texte {
    gap: 28px;
  }
  .etape__titre {
    font-size: 22px;
  }

  /* C. Avis */
  .avis {
    padding: var(--section-y) 0 64px;
  }
  .guillemet {
    height: 32px;
    font-size: 80px;
  }
  .avis__texte p {
    font-size: 24px;
  }
  .references {
    margin-top: 56px;
  }
  .references__ligne {
    gap: 14px 28px;
  }
  .references__libelle {
    width: 100%;
    text-align: center;
  }
  .references__nom {
    font-size: 18px;
  }
  .avis__grille {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .references__logos {
    gap: 24px 36px;
  }
  .references__logo img {
    width: calc(var(--l) * .8);
  }

  /* D. Contact */
  .contact .ecran-coupe__photo {
    height: 200px;
  }
  .contact__texte,
  .ecran-coupe .contact__texte {
    padding: 40px 20px 56px;
  }
  .soleil--contact {
    right: -88px;
    top: -88px;
    width: 220px;
    height: 220px;
  }
  .contact__note {
    font-size: 20px;
  }
  .contact__intro {
    font-size: 16px;
  }
  .grille-champs {
    grid-template-columns: 1fr;
  }
  .formulaire__envoi .btn {
    width: 100%;
  }

  /* Pied de page : 2 colonnes, place pour la barre d'action */
  .pied {
    padding: 64px 0 calc(34px + 84px + env(safe-area-inset-bottom));
  }
  .pied__grille {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .pied__colonne--marque {
    grid-column: 1 / -1;
  }
  .pied__bas {
    margin-top: 48px;
  }
  .pied__bas-ligne {
    flex-direction: column;
    gap: 12px;
  }

  /* Barre d'action téléphone */
  .barre-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    background: var(--creme-clair);
    box-shadow: var(--ombre-barre);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .barre-mobile--visible {
    transform: none;
    visibility: visible;
    transition: transform .3s ease, visibility 0s;
  }
  .barre-mobile .btn {
    flex: 1;
  }
  .barre-mobile__appel {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--terre-cuite);
    color: var(--terre-cuite-texte);
    transition: background-color .2s ease, color .2s ease;
  }
  .barre-mobile__appel:hover {
    background: var(--terre-cuite);
    color: var(--texte-sur-terre-cuite);
  }
  .barre-mobile__appel svg {
    width: 22px;
    height: 22px;
  }
}

/* Moins de 600 px : tout sur une colonne (sauf le portfolio) ------------------ */
@media (max-width: 599px) {
  .pied__grille {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ==========================================================================
   11. PAGES INTÉRIEURES
   Mariages · Mes prestations · Portfolio · Le photographe · Contact ·
   Accès clients · pages légales
   ========================================================================== */

/* 11.1 En-tête de page (photo + titre) -------------------------------------- */
.plein-ecran--page {
  height: clamp(460px, 66vh, 700px);
  height: clamp(460px, 66svh, 700px);
  min-height: 0;
}
.plein-ecran--page::before {
  background:
    linear-gradient(180deg, rgba(43, 32, 26, .35), rgba(43, 32, 26, .35)),
    radial-gradient(ellipse 62% 58% at 50% 52%, rgba(43, 32, 26, .55), rgba(43, 32, 26, .1));
}
/* Photo déjà douce (coucher de soleil) : voile plus léger, seulement derrière le titre */
.plein-ecran--page.tete-page--claire::before {
  background:
    linear-gradient(180deg, rgba(43, 32, 26, .12), rgba(43, 32, 26, .12)),
    radial-gradient(ellipse 50% 46% at 50% 50%, rgba(43, 32, 26, .42), rgba(43, 32, 26, 0));
}
.tete-page__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tete-page__contenu {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 24px;
  text-align: center;
}
.tete-page__titre {
  max-width: 18ch;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(43, 32, 26, .6);
}
.tete-page__surtitre {
  display: block;
  margin-bottom: 18px;
  padding-left: .24em;
  font-family: var(--police-texte);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: none;
}
.tete-page__intro {
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--creme-clair);
  font-weight: 500;
  text-shadow: 0 1px 16px rgba(43, 32, 26, .7);
}
.tete-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}
.tete-page--photographe .tete-page__image img {
  object-position: 62% 50%;
}

/* En-tête sans photo (pages légales) */
.tete-simple {
  padding: 80px 0 16px;
  text-align: center;
}
.tete-simple__titre {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.05;
}

/* Page 404 */
.erreur {
  min-height: 62vh;
  display: flex;
  align-items: center;
}
.erreur__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.erreur__aide {
  margin-top: 8px;
  font-size: 15px;
  color: var(--brun-doux);
}

/* 11.2 Petits éléments communs ------------------------------------------------ */
.intro-centree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.intro-centree:not(:last-child) { /* de l'air avant le contenu de la section */
  margin-bottom: 56px;
}
.texte-courant {
  font-size: 17px;
  line-height: 1.8;
  color: var(--brun-moyen);
}
.section--terre-cuite .texte-courant,
.section--bleu .texte-courant {
  color: inherit;
}
.btn--creme {
  background: var(--creme-clair);
  color: var(--terre-cuite-texte);
}
.btn--creme:hover {
  background: var(--blanc-chaud);
  color: var(--terre-cuite-fonce);
}
.puces-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.puces-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--sable);
  border-radius: var(--rayon-pilule);
  background: var(--blanc-chaud);
  color: var(--brun);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.puces-nav a:hover {
  border-color: var(--terre-cuite);
  color: var(--terre-cuite-texte);
}
.encadre { /* une info importante, mise en avant */
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--creme-clair);
  border: 1px solid var(--sable-clair);
  font-size: 15px;
  line-height: 1.65;
  color: var(--brun-moyen);
}
.encadre svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--terre-cuite-texte);
}
.encadre strong {
  color: var(--brun);
}
.section--creme-clair .encadre {
  background: var(--blanc-chaud);
}

/* 11.3 Bandeau d'appel final ------------------------------------------------ */
.bandeau-cta__interieur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.bandeau-cta__texte {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--texte-sur-terre-cuite-2);
}

/* 11.4 Formules détaillées (page Mariages) ------------------------------------ */
.grille-formules--grande {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 1040px;
  margin: 0 auto;
}
.carte-formule--grande {
  gap: 18px;
  padding: 40px;
}
.carte-formule--grande .carte-formule__nom {
  font-size: 38px;
}
.carte-formule__plus {
  font-size: 15px;
  font-weight: 600;
}
.formule-bloc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--sable-clair);
}
.carte-formule--complete .formule-bloc {
  border-top-color: rgba(255, 248, 239, .3);
}
.formule-bloc__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
}
.formule-bloc__texte {
  font-size: 15px;
  line-height: 1.65;
}
.carte-formule--essentielle .formule-bloc__texte {
  color: var(--brun-moyen);
}
.carte-formule--complete .formule-bloc__texte,
.carte-formule--complete .carte-formule__plus {
  color: var(--texte-sur-terre-cuite-2);
}
.formules__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.formules__suite {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: var(--brun-moyen);
}

/* 11.5 Ce qui est inclus ------------------------------------------------------- */
.grille-inclus {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.inclus {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inclus svg {
  width: 30px;
  height: 30px;
  color: var(--terre-cuite-texte);
}
.inclus__titre {
  font-family: var(--police-titre);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.15;
}
.inclus__texte {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brun-moyen);
}

/* 11.6 Histoires vraies -------------------------------------------------------- */
.grille-histoires {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.histoire {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px;
  border: 1px solid rgba(255, 248, 239, .3);
  border-radius: var(--rayon-carte);
  background: rgba(255, 248, 239, .06);
}
.histoire__titre {
  font-family: var(--police-titre);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
}
.histoire__texte {
  font-size: 16px;
  line-height: 1.75;
  color: var(--texte-sur-terre-cuite-2);
}

/* 11.7 Questions fréquentes ---------------------------------------------------- */
.faq {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--sable);
}
.faq details {
  border-bottom: 1px solid var(--sable);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--police-titre);
  font-size: 22px;
  line-height: 1.3;
  color: var(--brun);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--terre-cuite);
  border-radius: 50%;
  font-family: var(--police-texte);
  font-size: 20px;
  color: var(--terre-cuite-texte);
}
.faq details[open] summary::after {
  content: "−";
}
.faq summary:hover {
  color: var(--terre-cuite-texte);
}
.faq__reponse {
  padding: 0 56px 24px 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--brun-moyen);
}

/* 11.8 Frise (Mon histoire) ---------------------------------------------------- */
.frise {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.frise::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--sable);
}
.frise__etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 48px;
}
.frise__etape::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ocre);
  box-shadow: 0 0 0 5px var(--creme);
}
.frise__etape:last-child::before {
  background: var(--terre-cuite);
}
.frise__titre {
  font-family: var(--police-titre);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
}
.frise__texte {
  font-size: 16px;
  line-height: 1.75;
  color: var(--brun-moyen);
}

/* Témoignage d'un client dans une partie de page (fond crème) */
.temoignage {
  margin: 0;
  padding: 24px 28px;
  border-left: 3px solid var(--terre-cuite);
  background: var(--creme-clair);
  border-radius: 0 var(--rayon-champ) var(--rayon-champ) 0;
}
.temoignage blockquote {
  margin: 0;
}
.temoignage blockquote p {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--brun);
}
.temoignage__signature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brun);
}
.temoignage__signature img {
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 50%;
  background: var(--brun);
}
.temoignage__lieu {
  display: block;
  font-weight: 400;
  color: var(--brun-doux);
}

/* Citation longue sur bande bleue */
.avis__texte--long p {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.5;
}

/* 11.9 Photos en ligne (page Le photographe) ----------------------------------- */
.trio-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.trio-photos img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon-photo);
}

/* 11.10 Portfolio : filtres, galerie, visionneuse ------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.filtre {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--sable);
  border-radius: var(--rayon-pilule);
  background: var(--blanc-chaud);
  color: var(--brun);
  font-family: var(--police-texte);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filtre:hover {
  border-color: var(--terre-cuite);
}
.filtre[aria-pressed="true"] {
  border-color: var(--brun);
  background: var(--brun);
  color: var(--creme-clair);
}
.galerie {
  columns: 3;
  column-gap: 24px;
}
.galerie__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
  break-inside: avoid;
}
.galerie__item[hidden] {
  display: none;
}
.galerie__ouvrir {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--rayon-photo);
  background: var(--sable-clair);
  cursor: zoom-in;
}
.galerie__ouvrir img {
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.galerie__ouvrir:hover img {
  transform: scale(1.02);
}
.galerie__item figcaption {
  font-size: 13px;
  color: var(--brun-doux);
}

.visionneuse {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 84px;
  background: rgba(43, 32, 26, .95);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.visionneuse--ouverte {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}
.visionneuse__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.visionneuse__image {
  max-width: min(1200px, 100%);
  max-height: calc(100vh - 170px);
  object-fit: contain;
  border-radius: 6px;
}
.visionneuse__legende {
  font-size: 14px;
  color: var(--texte-pied);
  text-align: center;
}
.visionneuse__bouton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid rgba(251, 244, 233, .55);
  border-radius: 50%;
  background: transparent;
  color: var(--creme-clair);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.visionneuse__bouton:hover {
  border-color: var(--creme-clair);
  background: rgba(251, 244, 233, .08);
}
.visionneuse__bouton svg {
  width: 22px;
  height: 22px;
}
.visionneuse__bouton--fermer { top: 18px; right: 18px; }
.visionneuse__bouton--precedent { left: 18px; top: 50%; transform: translateY(-50%); }
.visionneuse__bouton--suivant { right: 18px; top: 50%; transform: translateY(-50%); }
.visionneuse :focus-visible {
  outline-color: var(--creme-clair);
}

/* 11.11 Contact ----------------------------------------------------------------- */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.contact-infos {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.coordonnees {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.coordonnee {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--sable-clair);
  border-radius: 18px;
  background: var(--creme-clair);
}
.coordonnee svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--terre-cuite-texte);
}
.coordonnee__libelle {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brun-doux);
}
.coordonnee__valeur {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--brun);
}
.coordonnee__valeur a {
  color: var(--brun);
  text-decoration: none;
}
.coordonnee__valeur a:hover {
  color: var(--terre-cuite-texte);
}
.carte-formulaire {
  padding: 40px;
  border-radius: var(--rayon-carte);
  background: var(--creme-clair);
  border: 1px solid var(--sable-clair);
}

/* 11.12 Accès clients ---------------------------------------------------------- */
.etapes-ligne {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etape-carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  border: 1px solid var(--sable-clair);
  border-radius: var(--rayon-carte);
  background: var(--creme-clair);
}
.etape__numero--plein {
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
}
.lumys-zone {
  min-height: 220px;
  padding: 32px;
  border: 1px dashed var(--sable);
  border-radius: var(--rayon-carte);
  background: var(--blanc-chaud);
}
.lumys-zone__note {
  font-size: 14px;
  color: var(--brun-doux);
  text-align: center;
}

/* 11.13 Pages légales ------------------------------------------------------------ */
.texte-legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.texte-legal h2 {
  margin-top: 26px;
  font-family: var(--police-titre);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}
.texte-legal p,
.texte-legal li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--brun-moyen);
}
.texte-legal ul {
  margin: 0;
  padding-left: 22px;
}
.a-completer {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--ocre-clair);
  color: var(--brun);
  font-weight: 600;
}

/* 11.14 Fondu : plusieurs photos qui se succèdent dans le même cadre --------------- */
.fondu {
  position: absolute;
  inset: 0;
}
.fondu img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.fondu img.fondu--active {
  opacity: 1;
}

/* 11.15 Bande défilante (une journée de mariage) ----------------------------------- */
.bande {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bande__piste {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 0 max(var(--marge-laterale), calc((100vw - var(--largeur-max)) / 2 + var(--marge-laterale)));
  scroll-padding: 0 max(var(--marge-laterale), calc((100vw - var(--largeur-max)) / 2 + var(--marge-laterale)));
}
.bande__piste::-webkit-scrollbar {
  display: none;
}
.bande__item {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
}
.bande__item img {
  width: auto;
  height: clamp(280px, 36vw, 520px);
  object-fit: cover;
  border-radius: var(--rayon-photo);
}
.bande__fleches {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.bande__fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid var(--terre-cuite);
  border-radius: 50%;
  background: transparent;
  color: var(--terre-cuite-texte);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.bande__fleche:hover {
  background: var(--terre-cuite);
  color: var(--texte-sur-terre-cuite);
}
.bande-espace {
  margin-top: 64px;
}
.section--bleu .bande__fleche,
.section--terre-cuite .bande__fleche {
  border-color: rgba(251, 244, 233, .7);
  color: var(--creme-clair);
}
.section--bleu .bande__fleche:hover,
.section--terre-cuite .bande__fleche:hover {
  background: rgba(251, 244, 233, .12);
}
.bande__fleche svg {
  width: 22px;
  height: 22px;
}

/* 11.16 Histoires illustrées, citation avec photo -------------------------------- */
.grille-histoires--trois {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.histoire__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
}
.histoire__image--bas img {
  object-position: 50% 78%;
}
.citation-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.citation-photo img { /* photo entière, sans recadrage */
  width: 100%;
  height: auto;
  border-radius: var(--rayon-photo);
  border: 8px solid var(--creme);
}
.citation-photo .avis__citation {
  align-items: flex-start;
  text-align: left;
}

/* 11.17 Responsive des pages intérieures ------------------------------------------ */
@media (max-width: 1199px) {
  .grille-inclus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-grille {
    gap: 48px;
  }
}
@media (max-width: 899px) {
  .plein-ecran--page {
    height: clamp(540px, 84vh, 740px);
    height: clamp(540px, 84svh, 740px);
  }
  .tete-page__intro {
    font-size: 16px;
  }
  .intro-centree:not(:last-child) {
    margin-bottom: 36px;
  }
  .tete-page__surtitre {
    font-size: 10.5px;
  }
  .grille-formules--grande,
  .grille-histoires,
  .grille-histoires--trois,
  .citation-photo,
  .contact-grille,
  .etapes-ligne {
    grid-template-columns: 1fr;
  }
  .carte-formule--grande {
    padding: 28px;
  }
  .citation-photo {
    gap: 32px;
  }
  .citation-photo img {
    max-width: 420px;
    margin: 0 auto;
  }
  .bande__fleches {
    display: none; /* sur téléphone, on fait glisser du doigt */
  }
  .carte-formule--grande .carte-formule__nom {
    font-size: 32px;
  }
  .histoire {
    padding: 26px;
  }
  .faq summary {
    font-size: 19px;
  }
  .faq__reponse {
    padding-right: 0;
  }
  .frise {
    gap: 32px;
  }
  .frise__titre {
    font-size: 22px;
  }
  .trio-photos {
    gap: 12px;
  }
  .galerie {
    columns: 2;
    column-gap: 12px;
  }
  .galerie__item {
    margin-bottom: 12px;
  }
  .filtres {
    margin-bottom: 28px;
  }
  .visionneuse {
    padding: 72px 12px;
  }
  .visionneuse__bouton {
    width: 44px;
    height: 44px;
  }
  .visionneuse__bouton--precedent,
  .visionneuse__bouton--suivant {
    top: auto;
    bottom: 18px;
    transform: none;
  }
  .carte-formulaire {
    padding: 24px 20px;
  }
  .texte-courant {
    font-size: 16px;
  }
}
@media (max-width: 599px) {
  .grille-inclus {
    grid-template-columns: 1fr;
  }
  .trio-photos {
    grid-template-columns: 1fr 1fr;
  }
  .trio-photos > :last-child {
    display: none;
  }
}