/* ============================================================
   LES TROIS ÉPIS — feuille de style unique
   Démonstration de la formule VISIBILITÉ (390 €)
   ------------------------------------------------------------
   PARTI PRIS : une galerie d'art, pas une brochure.
   La photographie commande la mise en page. Le texte se range
   autour d'elle. Peu d'éléments, très grands, très espacés.

   TROIS EFFETS SUR TOUTE LA PAGE, pas un de plus :
     1. l'ouverture : la photo d'accueil se pose ;
     2. les blocs qui montent quand ils entrent dans l'écran ;
     3. les photos de la galerie au survol.
   Ils ne touchent QUE « transform » et « opacity », les deux
   seules propriétés que le navigateur sait animer sans
   recalculer la page. C'est de là que vient la fluidité.
   (La barre du haut ajoute un simple fondu, en « opacity » lui
   aussi.) Aucun « filter », aucune ombre animée, aucune
   hauteur animée : ce sont les trois causes habituelles de
   saccades.

   Tout est dans ce seul fichier. Aucune police téléchargée,
   aucune bibliothèque, aucun lien vers l'extérieur.
   Pour changer l'identité d'un client, il suffit le plus
   souvent de modifier le bloc « LES COULEURS ».
   ============================================================ */


/* ============================================================
   1. LES COULEURS ET LES POLICES
   ============================================================ */
:root {
  /* Les fonds clairs : la farine, la pâte crue */
  --creme:    #faf6f0;
  --creme-2:  #f2eade;
  --creme-3:  #e7dbc9;

  /* Les fonds sombres : le four éteint */
  --four:     #171009;
  --four-2:   #221709;

  /* Le texte.
     --encre-doux est vérifié à 5,0 sur le crème : assez
     contrasté pour du texte courant. */
  --encre:      #2a2118;
  --encre-doux: #6b5a4a;
  --encre-clair:#f4ebe0;

  /* Les accents. Deux tons d'orange, et ce n'est pas de la
     coquetterie :
       • --braise      : le fond des boutons, pour que le blanc
                         dessus reste lisible (contraste 4,7) ;
       • --braise-txt  : les petits textes orange sur fond clair
                         (contraste 5,4). Un orange plus vif ne
                         monterait qu'à 3,5, insuffisant. */
  --braise:     #c0530f;
  --braise-txt: #a8460c;
  --miel:       #d9a441;

  --trait: #e2d6c2;

  /* Une police à empattements pour les titres : c'est elle qui
     donne le côté « enseigne ». Elle est déjà installée sur
     tous les appareils, rien n'est téléchargé. */
  --titre: "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, "Times New Roman", serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* Le souffle entre deux sujets. C'est le réglage le plus
     important du site : c'est lui qui fait « respirer ». */
  --souffle: clamp(5.5rem, 11vw, 11rem);
  --largeur: 1240px;
}


/* ============================================================
   2. RÉGLAGES DE BASE
   ============================================================ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* La barre du haut est fixe et mesure environ 112 px (bandeau
     de démonstration + navigation). Sans cette réserve, un clic
     dans le menu amènerait le titre SOUS la barre. */
  scroll-padding-top: 124px;
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.7;
  color: var(--encre);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;         /* les bandes vont d'un bord à l'autre */
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 8.4vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
h3 { font-size: 1.3rem; letter-spacing: -.005em; }

p { margin: 0 0 1.1em; }
a { color: var(--braise-txt); }

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

.conteneur { width: min(100% - 2.6rem, var(--largeur)); margin-inline: auto; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Le lien « Aller au contenu », visible seulement au clavier. */
.evite {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--four); color: var(--encre-clair);
  padding: .7rem 1.1rem; border-radius: 4px; text-decoration: none;
}
.evite:focus { top: 12px; }


/* ============================================================
   3. LES TROIS EFFETS DE LA PAGE
   ------------------------------------------------------------
   🔴 RÈGLE IMPORTANTE
   L'état de repos est VISIBLE. La règle qui masque est écrite
   sous « .js », une classe que seul le script pose. Si le
   JavaScript ne se charge pas, ou s'il est bloqué, rien n'est
   jamais caché : la page reste entièrement lisible.
   ============================================================ */

/* --- Effet 1 : les blocs qui montent en entrant dans l'écran --- */
.js .apparait {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .apparait.vu { opacity: 1; transform: translate3d(0, 0, 0); }

/* --- Effet 2 : l'ouverture. La photo se pose, le titre monte. --- */
@keyframes pose    { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes remonte { from { opacity: 0; transform: translate3d(0, 34px, 0); }
                     to   { opacity: 1; transform: translate3d(0, 0, 0); } }

/* --- Effet 3 : le survol des photos de la galerie ---
   (écrit plus bas, au chapitre 12) */


/* ============================================================
   4. LA BARRE DU HAUT (bandeau de démonstration + navigation)
   ------------------------------------------------------------
   Les deux sont dans le MÊME bloc fixe. C'est ce qui garantit
   que la navigation ne passe jamais par-dessus le bandeau,
   quelle que soit la hauteur de l'un ou de l'autre.
   ============================================================ */
.barre-haut {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
}

.demo-bandeau {
  margin: 0; padding: .5rem 1rem;
  background: var(--four); color: var(--miel);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  text-align: center; font-weight: 600;
}


/* ============================================================
   5. L'EN-TÊTE
   ------------------------------------------------------------
   Volontairement DISCRET : rien ne doit voler la vedette aux
   photos. Il flotte sur la photo d'accueil, puis un fond sombre
   apparaît en fondu quand on descend.
   Le texte reste crème dans les DEUX états : aucune couleur
   n'a donc besoin d'être animée, seulement une opacité.
   ============================================================ */
.entete {
  position: relative;
  color: var(--encre-clair);
}

/* Le fond sombre, posé en calque : c'est lui qui apparaît. */
.entete::before {
  content: ""; position: absolute; inset: 0;
  background: var(--four);
  opacity: 0;
  transition: opacity .45s ease;
}
.entete--pose::before { opacity: .97; }

/* Un léger dégradé noir en haut, pour que le menu clair reste
   lisible sur n'importe quelle photo. Fixe, jamais animé. */
.entete::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10,6,2,.66), rgba(10,6,2,0));
  pointer-events: none;
}

.entete__in {
  position: relative;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1.05rem 0;
}

.marque { display: flex; align-items: center; gap: .65rem;
          text-decoration: none; color: inherit; margin-right: auto; }
.marque__signe { width: 26px; height: 26px; flex: none; color: var(--miel); }
.marque__txt b {
  display: block; font-family: var(--titre); font-size: 1.22rem;
  letter-spacing: .005em; line-height: 1.1;
}
.marque__txt small {
  display: block; font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; opacity: .74; margin-top: .12rem;
}

.menu { display: flex; gap: 1.7rem; }
.menu a {
  color: inherit; text-decoration: none;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .84; padding: .3rem 0;
}
.menu a:hover { opacity: 1; }

.entete__tel {
  color: inherit; text-decoration: none;
  font-size: .82rem; letter-spacing: .06em;
  border: 1px solid rgba(244,235,224,.45);
  padding: .5rem 1rem; border-radius: 100px;
}
.entete__tel:hover { border-color: var(--miel); color: var(--miel); }


/* ============================================================
   6. SUJET 1 — L'ACCUEIL
   ------------------------------------------------------------
   Une photographie PLEIN ÉCRAN. C'est le cœur du parti pris :
   sur les plus beaux sites de boulangerie, l'image occupe tout,
   et le texte vient se poser dessus, en bas, sans l'encombrer.
   ============================================================ */
.haut {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--four);
}

.haut__media { position: absolute; inset: 0; }
.haut__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: pose 1.6s cubic-bezier(.22,.61,.36,1) both;
}

/* Le voile : sombre en bas pour porter le texte, transparent en
   haut pour laisser voir la photo. Fixe, jamais animé. */
.haut__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(12,7,2,.88) 0%, rgba(12,7,2,.46) 34%, rgba(12,7,2,0) 68%);
  pointer-events: none;
}

.haut__in {
  position: relative;
  width: min(100% - 2.6rem, var(--largeur));
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  padding-top: 9rem;
  color: var(--encre-clair);
  animation: remonte 1s cubic-bezier(.22,.61,.36,1) .25s both;
}

.haut h1 { color: #fff; max-width: 15ch; margin-bottom: .3em; }
.haut h1 em { display: block; font-style: normal; color: var(--miel); }

.haut .chapo {
  max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: rgba(244,235,224,.9); margin-bottom: 2.1rem;
}

.surtitre {
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--braise-txt); margin-bottom: 1.2rem;
}
.surtitre--clair { color: var(--miel); }

.haut__boutons { display: flex; flex-wrap: wrap; gap: .9rem; }


/* ============================================================
   7. LES BOUTONS
   ============================================================ */
.bouton {
  display: inline-block; text-decoration: none;
  background: var(--braise); color: #fff;
  font-size: .92rem; font-weight: 600; letter-spacing: .03em;
  padding: 1rem 1.9rem; border-radius: 100px;
  border: 1px solid var(--braise);
  transition: transform .25s ease, opacity .25s ease;
}
.bouton:hover { transform: translate3d(0,-2px,0); opacity: .92; }
.bouton:active { transform: translate3d(0,0,0); }

.bouton--vide {
  background: transparent; color: var(--encre-clair);
  border-color: rgba(244,235,224,.5);
}
.bouton--vide:hover { border-color: #fff; }

.bouton--large {
  width: 100%; text-align: center; border: 0;
  font-family: inherit; font-size: 1rem; cursor: pointer;
}

.bouton--inactif {
  background: transparent; color: var(--encre-clair);
  border: 1px dashed rgba(244,235,224,.45);
  cursor: not-allowed;
}
.bouton--inactif:hover { transform: none; opacity: 1; }


/* ============================================================
   8. LA STRUCTURE DES SUJETS
   Beaucoup d'air : c'est ce qui fait le calme d'une galerie.
   ============================================================ */
.sujet { padding: var(--souffle) 0; }
.sujet--creme  { background: var(--creme-2); }
.sujet--sombre { background: var(--four); color: var(--encre-clair); }
.sujet--sombre h2, .sujet--sombre h3 { color: #fff; }

.sujet__tete { max-width: 44ch; margin-bottom: clamp(2.8rem, 5vw, 4.5rem); }
.sujet__tete .intro { color: var(--encre-doux); font-size: 1.06rem; }
.sujet--sombre .sujet__tete .intro { color: rgba(244,235,224,.78); }


/* ============================================================
   9. SUJET 2 — LA MAISON
   Du texte seul, en grand, sans photo : le contraste avec les
   bandes photographiques donne le rythme de la page.
   ============================================================ */
.maison { max-width: 62ch; }
.maison h2 { margin-bottom: .55em; }
.maison p {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  color: var(--encre-doux); line-height: 1.75;
}

/* Trois chiffres, très grands, très espacés. */
.chiffres {
  list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  border-top: 1px solid var(--trait);
  padding-top: clamp(2.2rem, 4vw, 3.2rem);
}
.chiffres b {
  display: block; font-family: var(--titre);
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1;
  color: var(--encre); letter-spacing: -.03em;
}
.chiffres span {
  display: block; margin-top: .7rem;
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--encre-doux); line-height: 1.5;
}


/* ============================================================
   10. LES BANDES PHOTO PLEINE LARGEUR
   ------------------------------------------------------------
   C'est le deuxième pilier du parti pris : entre deux sujets,
   un gros plan occupe TOUTE la largeur et une bonne moitié de
   l'écran. On ne lit plus, on regarde.
   ============================================================ */
.bande {
  position: relative;
  min-height: clamp(400px, 68vh, 720px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--four);
}
.bande img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.bande__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(10,6,2,.84) 0%, rgba(10,6,2,.22) 56%, rgba(10,6,2,0) 100%);
  pointer-events: none;
}
.bande__txt {
  position: relative;
  width: min(100% - 2.6rem, var(--largeur));
  margin-inline: auto;
  padding-bottom: clamp(2.6rem, 5vw, 4.5rem);
  padding-top: clamp(4rem, 8vw, 7rem);
  color: var(--encre-clair);
}
.bande__txt p {
  margin: 0; max-width: 22ch;
  font-family: var(--titre);
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: 1.12; letter-spacing: -.02em; color: #fff;
}
.bande__txt em { display: block; font-style: normal; color: var(--miel); }

/* Variante : le texte se range à DROITE.
   Sur la photo du geste, le sujet est à gauche et le fond est
   noir à droite : en déplaçant la phrase, on ne recouvre plus
   la main, et le texte se pose sur du noir franc. */
.bande--droite .bande__txt p { margin-left: auto; text-align: right; }

/* La bande courte, en gros plan de matière. */
.bande--fine { min-height: clamp(300px, 48vh, 520px); }


/* ============================================================
   11. SUJET 3 — LA CARTE
   ============================================================ */
.carte__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
.carte__col h3 {
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  font-family: var(--texte); font-weight: 700; color: var(--braise-txt);
  padding-bottom: 1.1rem; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--trait);
}
.liste-prix { list-style: none; margin: 0; padding: 0; }
.liste-prix li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .72rem 0;
}
.liste-prix li + li { border-top: 1px solid rgba(226,214,194,.55); }
.liste-prix span { flex: 1; }
.liste-prix b { font-weight: 600; color: var(--encre-doux); white-space: nowrap; }

.carte__note {
  margin: clamp(2.6rem, 5vw, 4rem) 0 0;
  padding-top: 1.8rem; border-top: 1px solid var(--trait);
  color: var(--encre-doux); font-size: .95rem; max-width: 60ch;
}


/* ============================================================
   12. SUJET 4 — LA GALERIE
   ------------------------------------------------------------
   🔴 C'EST L'ARGUMENT DE LA FORMULE À 390 €.
   Huit photographies en GRAND, jamais en vignettes. Les tuiles
   d'une même rangée ont la même hauteur : la grille reste nette
   quel que soit le format des photos, qui sont recadrées à la
   volée par « object-fit: cover ».
   ============================================================ */
.galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.4rem);
}

/* Les hauteurs, rangée par rangée. */
.g1 { height: clamp(340px, 44vw, 600px); }
.g2 { height: clamp(320px, 40vw, 540px); }
.g3 { height: clamp(260px, 31vw, 430px); }
.g4 { height: clamp(320px, 42vw, 580px); }

.s2 { grid-column: span 2; }
.s3 { grid-column: span 3; }
.s4 { grid-column: span 4; }
.s6 { grid-column: span 6; }

/* La vignette est un bouton : elle ouvre la photo en grand. */
.vign {
  display: block; position: relative;
  width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: var(--creme-3);
  cursor: pointer; overflow: hidden;
  border-radius: 3px;
  font: inherit; color: inherit; text-align: left;
}
.vign img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
/* --- Effet 3 : la photo avance très légèrement au survol. --- */
.vign:hover img, .vign:focus-visible img { transform: scale(1.05); }

/* Le voile de la légende. Toujours là, il ne s'anime pas. */
.vign__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(10,6,2,.8) 0%, rgba(10,6,2,.1) 46%, rgba(10,6,2,0) 72%);
  pointer-events: none;
}
.vign__leg {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem clamp(1rem, 2vw, 1.6rem);
  color: #fff; font-size: clamp(.95rem, 1.3vw, 1.1rem);
  font-family: var(--titre); letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.vign:hover .vign__leg, .vign:focus-visible .vign__leg {
  transform: translate3d(0,-6px,0);
}
.vign__leg svg {
  width: 20px; height: 20px; flex: none; opacity: .75;
  transition: opacity .4s ease;
}
.vign:hover .vign__leg svg { opacity: 1; }

.galerie__aide {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .88rem; color: var(--encre-doux); max-width: 62ch;
}


/* ============================================================
   13. LA VISIONNEUSE (la photo ouverte en grand)
   Balise <dialog> du navigateur : rien n'est réinventé.
   ============================================================ */
.visio {
  border: 0; padding: 0;
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  background: transparent; color: var(--encre-clair);
}
/* Presque opaque : la page derrière ne doit plus attirer l'œil,
   la photo est seule en scène. */
.visio::backdrop { background: rgba(8,5,2,.985); }

.visio__cadre {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 6vw, 5rem);
}
.visio__cadre img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}

.visio__btn, .visio__fermer {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(244,235,224,.3);
  background: rgba(23,16,9,.6); color: var(--encre-clair);
  cursor: pointer;
  transition: transform .25s ease;
}
.visio__btn:hover, .visio__fermer:hover { transform: scale(1.08); }
.visio__btn svg, .visio__fermer svg { width: 22px; height: 22px; }
.visio__prec  { left:  clamp(.6rem, 2vw, 2rem); top: 50%; margin-top: -26px; }
.visio__suiv  { right: clamp(.6rem, 2vw, 2rem); top: 50%; margin-top: -26px; }
.visio__fermer{ right: clamp(.6rem, 2vw, 2rem); top: clamp(.8rem, 2vw, 1.6rem); }

.visio__leg {
  position: absolute; left: 0; right: 0; bottom: clamp(.9rem, 2vw, 1.8rem);
  margin: 0; text-align: center; font-size: .95rem;
  color: rgba(244,235,224,.9);
}
.visio__leg small { display: block; font-size: .78rem; opacity: .62; margin-top: .2rem; }


/* ============================================================
   14. SUJET 5 — LES AVIS
   IMPORTANT : aucun avis n'est inventé, jamais. Les cases
   restent vides et la raison est écrite noir sur blanc.
   ============================================================ */
.avis-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.avis-vide {
  border: 1px dashed var(--trait);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--creme);
}
.avis-vide__etiquette {
  display: block; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--braise-txt); margin-bottom: 1rem;
}
.avis-vide p {
  margin: 0; color: var(--encre-doux); font-style: italic;
  font-family: var(--titre); font-size: 1.12rem; line-height: 1.5;
}


/* ============================================================
   15. SUJET 6 — HORAIRES ET ACCÈS
   ============================================================ */
.horaires__in {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.horaires { width: 100%; border-collapse: collapse; margin-top: 1.6rem; }
.horaires th, .horaires td {
  text-align: left; padding: 1.05rem 0;
  border-bottom: 1px solid rgba(244,235,224,.14);
  font-weight: 400;
}
.horaires th { color: #fff; font-weight: 600; white-space: nowrap; padding-right: 1.5rem; }
.horaires td { color: rgba(244,235,224,.78); }
.horaires--ferme td { color: var(--miel); }

.acces h3 { margin-bottom: 1.2rem; }
.acces__adr {
  font-family: var(--titre); font-size: 1.5rem; line-height: 1.35;
  color: #fff; margin-bottom: 1.2rem;
}
.acces__note { color: rgba(244,235,224,.66); font-size: .9rem; max-width: 42ch; }
.acces__pts { list-style: none; margin: 2rem 0 0; padding: 0; }
.acces__pts li {
  padding: .55rem 0 .55rem 1.4rem; position: relative;
  color: rgba(244,235,224,.8); font-size: .95rem;
}
.acces__pts li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--miel);
}


/* ============================================================
   16. SUJET 7 — LES QUESTIONS
   Ouverture et fermeture par le HTML seul (balise <details>),
   donc sans une ligne de JavaScript.
   ============================================================ */
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 3rem clamp(1.3rem, 2.4vw, 1.9rem) 0;
  position: relative;
  font-family: var(--titre); font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* La croix qui devient un moins : deux traits, une rotation. */
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: 17px; height: 2px; background: var(--braise-txt);
  transition: transform .3s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p {
  margin: 0 0 clamp(1.3rem, 2.4vw, 1.9rem); max-width: 68ch;
  color: var(--encre-doux);
}


/* ============================================================
   17. SUJET 8 — LE CONTACT
   🔴 L'AUTRE ARGUMENT DE LA FORMULE À 390 €.
   ============================================================ */
.contact__in {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.coord-liste { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.coord-liste li { padding: 1.3rem 0; border-top: 1px solid var(--trait); }
.coord-liste b {
  display: block; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--braise-txt); margin-bottom: .45rem;
  font-weight: 600;
}
.coord-liste a, .coord-liste span {
  font-family: var(--titre); font-size: 1.35rem; color: var(--encre);
  text-decoration: none;
}
.coord-liste a:hover { color: var(--braise-txt); }
.coord-liste em {
  display: block; font-style: normal; font-size: .8rem;
  color: var(--encre-doux); margin-top: .35rem;
}

.formulaire {
  background: var(--creme);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--braise);
  padding: clamp(1.8rem, 3.5vw, 3rem);
}
.formulaire h3 { margin-bottom: 1.8rem; }

.champ { margin: 0 0 1.3rem; }
.champ label {
  display: block; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-doux);
  margin-bottom: .5rem; font-weight: 600;
}
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; color: var(--encre);
  background: #fff; border: 1px solid var(--trait); border-radius: 3px;
  padding: .85rem 1rem;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--braise); outline-offset: 1px; border-color: var(--braise);
}
/* Le piège à robots : invisible pour les humains. */
.champ--piege { position: absolute; left: -9999px; }

.rgpd {
  font-size: .84rem; color: var(--encre-doux);
  margin: 1.6rem 0 1.4rem; line-height: 1.6;
}

.formulaire__reponse {
  margin: 1.2rem 0 0; text-align: center; font-size: .95rem;
  color: var(--braise-txt); font-weight: 600;
}
.formulaire__reponse:empty { margin: 0; }


/* ============================================================
   18. LE PIED DE PAGE
   Sobre, exprès : la dernière chose qu'on doit retenir, ce sont
   les photos, pas le pied de page.
   ============================================================ */
.pied {
  background: var(--four); color: rgba(244,235,224,.72);
  padding: clamp(3.5rem, 7vw, 6rem) 0 2rem;
  font-size: .92rem;
}
.pied__in {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(244,235,224,.12);
}
.pied__nom {
  font-family: var(--titre); font-size: 1.5rem; color: #fff; margin-bottom: .5rem;
}
.pied__liens { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; max-width: 30rem; }
.pied__liens a { color: rgba(244,235,224,.8); text-decoration: none; font-size: .88rem; }
.pied__liens a:hover { color: var(--miel); }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  padding-top: 1.8rem; font-size: .8rem; color: rgba(244,235,224,.52);
}
.pied__bas p { margin: 0; }


/* ============================================================
   19. LES PAGES LÉGALES (mentions légales, confidentialité)
   Une colonne étroite, beaucoup d'air, rien d'autre.
   ============================================================ */
.doc { padding: calc(var(--souffle) + 3rem) 0 var(--souffle); }
.doc__in { max-width: 72ch; }

.doc h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1.2rem; }
.doc h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
}
.doc p, .doc li { color: var(--encre-doux); }
.doc li { margin-bottom: .5rem; }

.doc__retour {
  display: inline-block; margin-bottom: 2.5rem;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; font-weight: 600;
}

/* L'encadré « ceci est une démonstration ». */
.avis-cadre {
  border-left: 3px solid var(--braise);
  background: var(--creme-2);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.avis-cadre p { margin: 0; color: var(--encre); font-size: .96rem; }


/* ============================================================
   20. LE TÉLÉPHONE ET LES PETITS ÉCRANS
   Vérifié à 390 px de large.
   ============================================================ */
@media (max-width: 1000px) {
  .horaires__in, .contact__in { grid-template-columns: 1fr; }
  .carte__cols  { grid-template-columns: 1fr; gap: 2.5rem; }
  .avis-liste   { grid-template-columns: 1fr; }
  /* La galerie passe à deux tuiles par rangée. */
  .s2, .s3, .s4 { grid-column: span 3; }
  .g1, .g2, .g3, .g4 { height: clamp(240px, 40vw, 380px); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* ---------- LA BARRE DU HAUT SUR TÉLÉPHONE ----------------
     🔴 MESURÉ à 390 px : l'ancienne version rangeait les six liens
     sur UNE bande que l'on faisait glisser du doigt. Cette bande
     demandait 507 px pour 348 px disponibles : « Questions » et
     « Contact » étaient purement invisibles, et rien ne disait
     qu'il fallait faire glisser. Les liens ne faisaient que 30 px
     de haut ; il en faut 44 pour un doigt. Le numéro de téléphone,
     lui, disparaissait complètement.

     Maintenant : la barre ne reste plus collée en haut (elle
     mangeait 105 px d'écran en permanence) et les six liens
     deviennent six pavés lisibles, deux par ligne, tous visibles.
     Aucun JavaScript : rien ne peut casser. */
  .barre-haut { position: static; }
  /* La barre n'est plus posée sur la photo : il lui faut son
     propre fond sombre, sinon le texte crème serait sur du crème. */
  .entete::before { opacity: 1; }
  html { scroll-padding-top: 1rem; }

  /* Le bandeau doit tenir sur UNE ligne, sinon il mange l'écran. */
  .demo-bandeau { font-size: .6rem; letter-spacing: .1em; padding: .45rem .6rem; }

  .entete__in { flex-wrap: wrap; gap: .5rem 1rem; padding: .55rem 0 .9rem; }
  .marque { min-height: 44px; }
  .marque__txt b { font-size: 1.05rem; }
  /* On gagne une ligne : la sous-ligne du logo saute. */
  .marque__txt small { display: none; }

  /* Le numéro revient : c'est une boulangerie, on l'appelle pour
     commander un gâteau. Il est assez haut pour le doigt. */
  .entete__tel {
    display: flex; align-items: center;
    min-height: 44px; padding: .5rem 1rem;
    font-size: .84rem; white-space: nowrap;
  }

  .menu {
    order: 3; width: 100%;
    display: grid;
    /* Trois pavés par ligne : les six liens tiennent en deux
       lignes, l'en-tête reste court et la photo garde l'écran. */
    grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
    gap: .4rem;
  }
  .menu a {
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    min-height: 46px; padding: .5rem .4rem;
    font-size: .74rem; opacity: 1;
    border: 1px solid rgba(244,235,224,.28);
    border-radius: 4px;
  }
  .menu a:hover { border-color: var(--miel); color: var(--miel); }

  /* 🔴 MESURÉ à 360 px : le titre d'accueil, calibré pour un grand
     écran, retombait à 46 px et prenait CINQ lignes. On le fait
     descendre juste assez pour qu'il en prenne quatre. Le réglage
     sur ordinateur n'est pas touché. */
  h1 { font-size: clamp(2.4rem, 10.5vw, 4rem); }

  .haut { min-height: 82svh; }
  /* La barre ne recouvre plus la photo : cette réserve n'a plus
     lieu d'être. */
  .haut__in { padding-top: 3rem; }
  .haut__boutons .bouton { flex: 1 1 auto; text-align: center; }

  .chiffres { grid-template-columns: 1fr; gap: 1.6rem; }
  .chiffres li { display: flex; align-items: baseline; gap: 1.1rem; }
  .chiffres b { font-size: 2.6rem; }
  .chiffres span { margin-top: 0; }

  /* 🔴 Une seule photo par rangée : sur un téléphone, deux
     vignettes côte à côte redeviendraient des timbres-poste. */
  .s2, .s3, .s4, .s6 { grid-column: span 6; }
  .g1, .g2, .g3, .g4 { height: clamp(300px, 78vw, 460px); }

  .bande { min-height: clamp(340px, 62vh, 480px); }
  .bande--fine { min-height: clamp(240px, 42vh, 340px); }

  .visio__btn, .visio__fermer { width: 48px; height: 48px; }
  .visio__prec, .visio__suiv { margin-top: -24px; }

  .pied__in { flex-direction: column; gap: 1.8rem; }

  /* ---------- LES ZONES QUE L'ON TOUCHE DU DOIGT -------------
     🔴 MESURÉ : 16 liens faisaient moins de 44 px de haut, dont
     le numéro de téléphone (29 px) et l'adresse e-mail (29 px)
     du bloc « Nous écrire ». Deux liens du pied de page
     tombaient sous le même doigt. */
  .coord-liste a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .pied__liens { gap: 0 1.6rem; }
  .pied__liens a { display: flex; align-items: center; min-height: 44px; }
  .doc__retour { display: inline-flex; align-items: center; min-height: 44px; }

  /* Les liens à l'intérieur d'un paragraphe ne peuvent pas être
     rendus plus hauts sans casser l'interligne. On élargit
     seulement la zone qui réagit au doigt : sur un élément en
     ligne, cette marge ne décale pas le texte autour. */
  .rgpd a, .acces__note a, .carte__note a,
  .doc p a, .doc li a, .avis-cadre a { padding-block: .55rem; }
}


/* ============================================================
   21. « JE PRÉFÈRE MOINS DE MOUVEMENT »
   Réglage du système d'exploitation. On coupe TOUT : plus une
   seule animation, plus une seule transition.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .apparait { opacity: 1 !important; transform: none !important; }
}