/* ============================================================================
 * Média Photo — feuille de style
 *
 * ÉCRITE EN MOBILE FIRST.
 * Ce que ça veut dire concrètement : tout ce qui est écrit hors d'un @media
 * s'applique au TÉLÉPHONE. Les écrans plus larges viennent ensuite ajouter des
 * choses, avec @media (min-width: …). Jamais l'inverse.
 *
 * Pourquoi : la quasi-totalité des visiteurs arriveront d'Instagram, sur un
 * téléphone. Le téléphone n'a donc aucune règle à défaire — il reçoit le strict
 * nécessaire. Et toute modification future part du mobile par défaut, au lieu
 * de l'oublier.
 *
 * Deux paliers seulement, choisis sur ce que le contenu exige, pas sur des
 * tailles d'appareils :
 *   ≥ 601px  — la place suffit pour des grilles à plusieurs colonnes
 *   ≥ 901px  — la place suffit pour la barre de navigation complète
 *
 * Tout ce qui se règle (couleurs, tailles, espacements) est dans le bloc :root.
 *
 * Organisation :
 *   1. Tokens (:root)             7. Portfolio
 *   2. Base                       8. Déroulé
 *   3. Utilitaires                9. Espace client, avis, FAQ
 *   4. En-tête et navigation     10. Contact et pied de page
 *   5. Héro + réponse rapide     11. ≥ 601px
 *   6. Prestations & tarifs      12. ≥ 901px
 *                                13. Impression
 *
 * Règles de lisibilité tenues : texte courant jamais sous 16px, mentions jamais
 * sous 14px, champs de formulaire à 16px (sinon iOS zoome tout seul), zones
 * tactiles de 44px minimum. Contrôlées automatiquement par verifier-site.py.
 * ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Couleurs de marque — mesurées sur le logo, voir 01_BRANDING/PALETTE-ET-USAGES.md */
  --noir: #000000;
  --blanc: #FFFFFF;
  --rouge-marque: #8C2124;  /* le rouge du logo : 2,36:1 sur noir, JAMAIS pour du texte */
  --rouge: #D6383C;         /* même teinte, luminance relevée : 4,49:1 sur noir */
  --rouge-vif: #E85055;     /* survol */

  /* Gris de travail */
  --fond: #0A0A0A;
  --fond-carte: #141414;
  --fond-carte-2: #1C1C1C;
  --bord: #2A2A2A;
  --texte: #F2F2F2;
  --texte-doux: #B4B4B4;    /* 8,9:1 sur --fond : lisible en texte courant */
  --texte-faible: #8A8A8A;  /* mentions seulement, jamais un paragraphe */

  /* Typographie — valeurs MOBILE, relevées plus loin sur grand écran */
  --police: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corps: 16px;            /* plancher de lisibilité, on ne descend pas en dessous */
  --interligne: 1.6;

  /* Rythme — valeurs MOBILE */
  --pad-page: 18px;
  --largeur-max: 1200px;
  --largeur-texte: 66ch;    /* 45–75 caractères : la plage de lecture confortable */
  --section-y: 52px;
  --ancre: 80px;            /* dégagement sous l'en-tête collant pour les liens d'ancre */
  --radius: 4px;            /* angles quasi droits : plus « studio » que « application » */

  /* Lettrage espacé, la signature typographique du logo (« PHOTO ») */
  --tracking: 0.22em;

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. Base ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--corps);
  line-height: var(--interligne);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* garde-fou : aucune section ne doit déborder */
}

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

a { color: var(--rouge); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--rouge-vif); }

:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* clamp() : la taille suit la largeur de l'écran, sans palier brutal */
h1 { font-size: clamp(2.15rem, 8vw, 4.2rem); }
h2 { font-size: clamp(1.72rem, 5vw, 3rem); }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.1em; max-width: var(--largeur-texte); }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

/* ---------- 3. Utilitaires ---------------------------------------------- */
.contenu {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--pad-page);
}

.section { padding: var(--section-y) 0; }
.section--bord { border-top: 1px solid var(--bord); }

/* L'en-tête est collant : sans ce dégagement, cliquer « Prestations » dans le
   menu amène la section pile SOUS l'en-tête, qui masque alors son titre. */
section[id], main[id] { scroll-margin-top: var(--ancre); }

/* Sur-titre : petites capitales très espacées, reprises du « PHOTO » du logo */
.surtitre {
  display: block;
  margin-bottom: 18px;
  color: var(--rouge);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

.chapeau {
  color: var(--texte-doux);
  font-size: 1.06rem;
  max-width: 58ch;
}

.centre { text-align: center; }
.centre p, .centre .chapeau { margin-left: auto; margin-right: auto; }

/* Marqueur des contenus provisoires. Voir A-REMPLIR.md.
   Pour publier : supprimer les <span class="todo"> et leur contenu.
   Pas de white-space: nowrap ici — un libellé long doit pouvoir se couper,
   sinon il élargit la page (défaut trouvé au contrôle du 28.07). */
.todo {
  display: inline-block;
  padding: 1px 7px;
  border: 1px dashed #C99A2E;
  border-radius: 3px;
  background: rgba(201, 154, 46, 0.12);
  color: #E8B94A;
  font-size: 0.86em;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Boutons — pleine largeur sur mobile, plus facile à viser au pouce */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--plein {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--blanc);
}
.btn--plein:hover { background: var(--rouge-vif); border-color: var(--rouge-vif); color: var(--blanc); }

.btn--ligne {
  background: transparent;
  border-color: #4A4A4A;
  color: var(--texte);
}
.btn--ligne:hover { border-color: var(--blanc); color: var(--blanc); }

.btn--wa {
  background: #1E9C4A;
  border-color: #1E9C4A;
  color: var(--blanc);
}
.btn--wa:hover { background: #23B355; border-color: #23B355; color: var(--blanc); }
.btn--wa svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

/* ---------- 4. En-tête et navigation ------------------------------------ */
/* Mobile : logo + bouton menu. Le panneau se déroule sous l'en-tête. */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bord);
}

.entete__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 66px;
}

.logo-lien { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo-lien img { width: 44px; height: 44px; }
.logo-lien__nom { display: flex; flex-direction: column; line-height: 1.1; }
.logo-lien__nom strong {
  color: var(--blanc);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.logo-lien__nom span {
  color: var(--texte-faible);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

/* Bouton du menu */
.burger {
  display: block;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: transparent;
  color: var(--texte);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Panneau déroulant */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 var(--pad-page);
  max-height: 0;
  overflow: hidden;
  background: var(--fond);   /* opaque : sinon le titre du héro se lit derrière */
  border-bottom: 1px solid transparent;
  transition: max-height 300ms ease, border-color var(--transition);
}
.nav[data-ouvert="true"] {
  max-height: 480px;
  border-bottom-color: var(--bord);
}
.nav ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 8px 0 20px;
  list-style: none;
}
.nav li { margin: 0; border-bottom: 1px solid var(--bord); }
.nav li:last-child { border-bottom: 0; }
.nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--texte-doux);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nav a:hover { color: var(--blanc); }
.nav .btn { width: 100%; margin-top: 14px; min-height: 50px; }

/* Le bouton de l'en-tête n'apparaît qu'en grand écran : sur mobile ce sont
   celui du panneau et le bouton flottant qui servent. */
.entete > .contenu > .btn { display: none; }

/* ---------- 5. Héro ----------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 56px 0 48px;
  overflow: hidden;
}
.hero__fond { position: absolute; inset: 0; z-index: 0; }
.hero__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
/* Voile : garantit la lisibilité du texte quelle que soit la photo mise derrière */
.hero__fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.72) 55%, rgba(10,10,10,0.5) 100%),
    linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0) 45%);
}
.hero .contenu { position: relative; z-index: 1; }

.hero h1 { margin-bottom: 22px; }
.hero h1 em { display: block; color: var(--rouge); font-style: normal; }
.hero__texte { font-size: 1rem; color: var(--texte-doux); }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 30px;
}
.hero__actions .btn { width: 100%; }

/* Réponse rapide — bloc factuel dense, juste sous le héro.
   Il sert deux publics à la fois : le visiteur pressé qui veut savoir en cinq
   secondes si on correspond, et les moteurs génératifs qui reprennent ce genre
   de bloc pour répondre à « quel photographe à Monastir ? ». */
.reponse-rapide {
  border-top: 1px solid var(--bord);
  background: #0D0D0D;
}
.reponse-rapide dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 22px 0;
}
.reponse-rapide dl > div {
  display: grid;
  grid-template-columns: 5.4rem 1fr;   /* libellé étroit, réponse au large */
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #1A1A1A;
}
.reponse-rapide dl > div:last-child { border-bottom: 0; }
.reponse-rapide dt {
  color: var(--rouge);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-top: 0.25em;
}
.reponse-rapide dd {
  margin: 0;
  color: var(--texte);
  font-size: 1rem;
  line-height: 1.5;
}

/* Appel à l'action mi-page — placé au point de décrochage, voir INTENTIONS.md §4 */
.cta-milieu {
  padding: 30px 0;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  background: linear-gradient(180deg, rgba(214, 56, 60, 0.10) 0%, var(--fond-carte) 100%);
}
.cta-milieu p {
  margin: 0 0 18px;
  max-width: 44ch;
  font-size: 1.06rem;
}
.cta-milieu strong { color: var(--blanc); }
.cta-milieu__actions { display: flex; flex-direction: column; gap: 11px; }
.cta-milieu__actions .btn { width: 100%; }

/* ---------- 6. Prestations & tarifs ------------------------------------- */
/* Mobile : carrousel horizontal. Quatre formules empilées feraient quatre
   écrans de défilement ; en carrousel on voit le bord de la suivante, ce qui
   invite à faire défiler. Scroll-snap CSS natif, zéro JavaScript. */
.packs {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* on déborde des marges de la page pour que les cartes touchent le bord */
  margin-left: calc(-1 * var(--pad-page));
  margin-right: calc(-1 * var(--pad-page));
  padding: 0 var(--pad-page);
}
.packs::-webkit-scrollbar { display: none; }

.pack {
  display: flex;
  flex-direction: column;
  flex: 0 0 84%;
  scroll-snap-align: start;
  padding: 24px 20px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: var(--fond-carte);
  transition: border-color var(--transition), background var(--transition);
}
.pack:hover { border-color: #454545; background: var(--fond-carte-2); }

.pack--phare {
  border-color: var(--rouge);
  background: linear-gradient(180deg, rgba(214, 56, 60, 0.08) 0%, var(--fond-carte) 40%);
}
.pack__etiquette {
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 4px 11px;
  border-radius: 3px;
  background: var(--rouge);
  color: var(--blanc);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pack h3 { margin-bottom: 4px; }
.pack__duree {
  margin-bottom: 20px;
  color: var(--texte-faible);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pack__prix {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bord);
  color: var(--blanc);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}
.pack__prix small {
  display: block;
  margin-top: 4px;
  color: var(--texte-faible);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pack ul { flex: 1 1 auto; margin: 0 0 26px; padding: 0; list-style: none; }
.pack li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 22px;
  color: var(--texte-doux);
  font-size: 1rem;
  line-height: 1.55;
}
.pack li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rouge);
}
.pack .btn { width: 100%; }

.note-tarifs {
  margin-top: 24px;
  color: var(--texte-doux);
  font-size: 1rem;
}

/* ---------- 7. Portfolio ------------------------------------------------ */
.filtres {
  display: flex;
  gap: 8px;
  margin: 24px 0 16px;
  /* une seule ligne qui défile : sept filtres sur trois lignes mangeaient
     150px de hauteur pour rien */
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: calc(-1 * var(--pad-page));
  margin-right: calc(-1 * var(--pad-page));
  padding: 0 var(--pad-page);
}
.filtres::-webkit-scrollbar { display: none; }
.filtre { flex: 0 0 auto; }
.filtre {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: transparent;
  color: var(--texte-doux);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.filtre:hover { border-color: #4A4A4A; color: var(--blanc); }
.filtre[aria-pressed="true"] {
  border-color: var(--rouge);
  background: var(--rouge);
  color: var(--blanc);
}

.galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.galerie__case {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  background: var(--fond-carte);
  cursor: zoom-in;
}
.galerie__case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity var(--transition);
}
.galerie__case:hover img { transform: scale(1.04); }
/* Sur mobile, TOUTES les vignettes sont au même format en 2 colonnes : les cases
   pleine largeur doublaient la hauteur de la galerie sans rien apporter.
   Elles reprennent leur place à partir de 601px. */
.galerie__case--large { grid-column: span 1; }
.galerie__case[hidden] { display: none; }

/* Galerie repliée : on montre 6 vignettes, le bouton révèle le reste.
   Sans JavaScript, l'attribut n'est jamais posé et tout reste visible. */
.galerie[data-replie="true"] .galerie__case[data-hors-repli="true"] { display: none; }

.galerie-plus {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  padding: 14px 20px;
  border: 1px solid #4A4A4A;
  border-radius: var(--radius);
  background: transparent;
  color: var(--texte);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.galerie-plus:hover { border-color: var(--blanc); color: var(--blanc); }
.galerie-plus[hidden] { display: none; }

.galerie__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 13px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: var(--blanc);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

/* Visionneuse plein écran */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.96);
  border: 0;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.96); }
.lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox__fermer {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: transparent;
  color: var(--texte);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__fermer:hover { border-color: var(--blanc); color: var(--blanc); }
.lightbox__legende {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  color: var(--texte-faible);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- 8. Déroulé -------------------------------------------------- */
/* Sept étapes empilées feraient sept écrans : carrousel, comme les formules. */
.deroule {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-left: calc(-1 * var(--pad-page));
  margin-right: calc(-1 * var(--pad-page));
  padding: 0 var(--pad-page);
  counter-reset: etape;
}
.deroule::-webkit-scrollbar { display: none; }

.etape {
  position: relative;
  flex: 0 0 84%;
  scroll-snap-align: start;
  padding: 24px 20px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: var(--fond-carte);
}
.etape::before {
  counter-increment: etape;
  content: '0' counter(etape);
  display: block;
  margin-bottom: 16px;
  color: var(--rouge);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.etape h3 { margin-bottom: 8px; }
.etape p { color: var(--texte-doux); font-size: 1rem; margin: 0; }

.engagement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 34px;
  padding: 22px 20px;
  border: 1px solid var(--rouge);
  border-radius: var(--radius);
  background: rgba(214, 56, 60, 0.07);
}
.engagement b { color: var(--blanc); font-size: 1.02rem; font-weight: 600; }
.engagement p { margin: 0; color: var(--texte-doux); font-size: 1rem; }

/* ---------- 9. Espace client, avis, FAQ --------------------------------- */
.espace-client {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--bord);
}
.espace-client h3 { font-size: 1.3rem; font-weight: 800; }
.espace-client__carte {
  padding: 22px 20px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: var(--fond-carte);
}
.espace-client__carte ul { margin: 0 0 22px; padding: 0; list-style: none; }
.espace-client__carte li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 26px;
  color: var(--texte-doux);
  font-size: 1rem;
}
.espace-client__carte li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--rouge);
}

.avis {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-left: calc(-1 * var(--pad-page));
  margin-right: calc(-1 * var(--pad-page));
  padding: 0 var(--pad-page);
}
.avis::-webkit-scrollbar { display: none; }
.avis blockquote {
  flex: 0 0 84%;
  scroll-snap-align: start;
  margin: 0;
  padding: 24px 20px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: var(--fond-carte);
}
.avis p { color: var(--texte); font-size: 1rem; font-style: italic; }
.avis footer {
  margin-top: 16px;
  color: var(--texte-faible);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.faq { max-width: 800px; margin-top: 34px; }
.faq details { border-bottom: 1px solid var(--bord); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 14px 0;
  color: var(--blanc);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--rouge);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; }
.faq p { color: var(--texte-doux); font-size: 1rem; }

/* ---------- 10. Contact et pied de page --------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

.contact__infos dl { margin: 30px 0 0; }
.contact__infos dt {
  margin-bottom: 5px;
  color: var(--texte-faible);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact__infos dd {
  margin: 0 0 15px;
  color: var(--texte);
  font-size: 1rem;
  line-height: 1.55;
}

.form {
  padding: 24px 20px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: var(--fond-carte);
}
.form__ligne { margin-bottom: 20px; }
.form__duo { display: grid; grid-template-columns: 1fr; gap: 0; }
.form label {
  display: block;
  margin-bottom: 7px;
  color: var(--texte);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.form label .obligatoire { color: var(--rouge); }

.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  background: #0D0D0D;
  color: var(--texte);
  font-family: inherit;
  font-size: 16px; /* 16px minimum : en dessous, iOS zoome tout seul sur le champ */
  transition: border-color var(--transition);
}
.form textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: #3C3C3C; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--rouge);
  outline: none;
}
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23B4B4B4' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
}
.form .btn { width: 100%; margin-top: 6px; }
.form__note {
  margin: 16px 0 0;
  color: var(--texte-faible);
  font-size: 0.875rem;  /* 14px : plancher absolu pour une mention */
  line-height: 1.6;
}

.pied {
  padding: 48px 0 30px;
  border-top: 1px solid var(--bord);
  background: #070707;
}
.pied__haut {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--bord);
}
.pied img { width: 62px; height: 62px; }
.pied__liens { display: flex; flex-direction: column; gap: 0; }
.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--texte-doux);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
.pied__liens a:hover { color: var(--blanc); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  color: var(--texte-faible);
  font-size: 0.875rem;
}
.pied__bas p { margin: 0; max-width: none; }

/* Bouton WhatsApp flottant : sur mobile c'est LE canal du client tunisien */
.wa-flottant {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1E9C4A;
  color: var(--blanc);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
.wa-flottant svg { width: 27px; height: 27px; fill: currentColor; }

/* ============================================================================
 * 11. ≥ 601px — la place suffit pour des grilles à plusieurs colonnes
 * ========================================================================== */
@media (min-width: 601px) {
  :root {
    --pad-page: 24px;
    --section-y: 78px;
    --corps: 17px;
  }

  h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

  .btn { padding: 14px 30px; }

  /* Héro : on lui donne de la hauteur et les boutons se mettent côte à côte */
  .hero { min-height: min(88vh, 820px); padding: 72px 0; }
  .hero h1 { max-width: 20ch; }
  .hero__texte { font-size: 1.1rem; max-width: 52ch; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
  .hero__actions .btn { width: auto; }
  .hero__fond img { opacity: 0.34; }

  .reponse-rapide dl {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    padding: 28px 0;
  }

  /* Les carrousels redeviennent des grilles : la largeur le permet */
  .packs, .deroule, .avis {
    display: grid;
    gap: 20px;
    margin: 52px 0 0;
    padding: 0;
    overflow: visible;
  }
  .packs { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .deroule { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .avis { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  .pack, .etape, .avis blockquote { flex: none; }
  .pack { padding: 32px 28px; }
  .pack__prix { font-size: 1.9rem; }
  .etape { padding: 30px 26px; }
  .avis blockquote { padding: 30px 28px; }

  .cta-milieu {
    padding: 34px 0;
  }
  .cta-milieu .contenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 34px;
  }
  .cta-milieu p { margin: 0; }
  .cta-milieu__actions { flex-direction: row; gap: 14px; }
  .cta-milieu__actions .btn { width: auto; }

  .engagement {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 34px;
    margin-top: 44px;
    padding: 28px 32px;
  }

  .filtres {
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0 28px;
    overflow: visible;
    padding: 0;
  }
  .filtre { padding: 10px 19px; font-size: 0.73rem; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
  .galerie__case--large { grid-column: span 2; }
  .galerie__case--large img { aspect-ratio: 3 / 2; }
  /* assez de place : plus besoin de replier la galerie */
  .galerie[data-replie="true"] .galerie__case[data-hors-repli="true"] { display: block; }
  .galerie-plus { display: none; }
  .lightbox { padding: 30px; }

  .espace-client__carte { padding: 38px 34px; }
  .faq { margin-top: 44px; }
  .faq summary { font-size: 1.06rem; padding: 21px 0; }

  .form { padding: 34px; }
  .form__duo { grid-template-columns: 1fr 1fr; gap: 16px; }
  .form label { font-size: 0.8rem; }

  .pied { padding: 56px 0 34px; }
  .pied__haut {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 34px;
  }
  .pied__liens { flex-direction: row; flex-wrap: wrap; gap: 28px; }
  .pied__liens a { min-height: 44px; }

  /* Écran large et souris : le bouton flottant masquerait du contenu pour rien */
  .wa-flottant { display: none; }
}

/* ============================================================================
 * 12. ≥ 901px — la place suffit pour la barre de navigation complète
 *
 * En dessous de 901px, la barre (5 liens espacés + bouton) débordait et se
 * faisait rogner : à 768px les liens devenaient inatteignables. C'est ce
 * défaut qui fixe ce palier, pas une taille d'appareil.
 * ========================================================================== */
@media (min-width: 901px) {
  :root { --section-y: 104px; --ancre: 96px; }

  .entete__inner { min-height: 78px; gap: 20px; }
  .logo-lien { gap: 13px; }
  .logo-lien img { width: 52px; height: 52px; }
  .logo-lien__nom strong { font-size: 1.02rem; }

  .burger { display: none; }

  /* La barre se déplie */
  .nav {
    position: static;
    margin-left: auto;
    padding: 0;
    max-height: none;
    overflow: visible;
    background: transparent;
    border-bottom: 0;
  }
  .nav ul { flex-direction: row; align-items: center; gap: 30px; padding: 0; }
  .nav li { border-bottom: 0; }
  .nav a { min-height: 0; font-size: 0.74rem; }

  /* Le bouton WhatsApp de la liste ne sert qu'au panneau replié : ici c'est
     celui de l'en-tête qui s'affiche, sinon ils feraient doublon. */
  .nav li:last-child { display: none; }
  .entete > .contenu > .btn {
    display: inline-flex;
    min-height: 44px;
    padding: 11px 20px;
    font-size: 0.7rem;
  }

  .reponse-rapide dl { grid-template-columns: 1fr 1fr 1fr; }
  .espace-client { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .contact { grid-template-columns: 1fr 1.15fr; gap: 56px; }
}

/* ============================================================================
 * 13. Impression — version sobre, utile pour un devis ou une fiche
 * ========================================================================== */
@media print {
  .entete, .nav, .wa-flottant, .lightbox, .filtres, .hero__fond { display: none !important; }
  body { background: #fff; color: #000; }
  .pack, .etape, .form { border-color: #ccc; background: #fff; }
  a { color: #000; }
}