/*
Theme Name: Al Hachir
Theme URI: https://alhachirvoyage.sn
Author: Groupe Al Hachir Voyage
Description: Thème bloc sur mesure pour le Groupe Al Hachir Voyage — Hadj, Omra, tourisme et location de véhicules. Monochrome, serif display italique, arche ogivale.
Version: 1.12.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-hachir
Tags: block-theme, full-site-editing, travel, one-column, dark
*/

/* ==========================================================================
   Groupe Al Hachir Voyage — feuille de style de la maquette
   Registre relevé sur la référence : monochrome intégral, serif display
   italique + sans-serif, fond noir continu, bandes pleine largeur,
   arche ogivale, titres de section centrés, grande échelle de titres.
   ========================================================================== */

:root {
  --noir:     #0A0A0A;
  --charbon:  #141414;
  --filet:    #262626;
  --ivoire:   #F1F0EE;
  --gris:     #8C8C8C;
  --fantome:  #252525;

  /* Jetons du logotype. Les noms historiques --noir, --charbon et --gris
     sont conserves comme noms de role : leur valeur est desormais bleue. */
  --nuit:     #141414;
  --orange:   #F48625;
  --azur:     #F1F0EE;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --arabe: 'Amiri', 'Playfair Display', serif;

  --large:     1260px;
  --etroit:    840px;
  --gouttiere: clamp(20px, 5vw, 64px);
  --bande:     clamp(84px, 9vw, 150px);

  /* arche ogivale — masque partagé par les visuels de forfait */
  --arche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0,140 V70 C0,34 16,20 34,9 C41,5 47,0 50,0 C53,0 59,5 66,9 C84,20 100,34 100,70 V140 Z' fill='%23000'/%3E%3C/svg%3E");
  --arche-plate: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 140%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0,140 V46 C0,24 15,13 33,6 C40,3 47,0 50,0 C53,0 60,3 67,6 C85,13 100,24 100,46 V140 Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Les marges de style navigateur sur figure et blockquote rentraient les
   visuels d'arche et les témoignages de 40 px de chaque côté. */
figure, blockquote { margin: 0; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* SUBSTITUTION 1 — filtre porté par les images de bloc.
   Toute photo du site est désaturée : la page n'a d'autre couleur que
   l'orange de la marque, réservé à l'action principale. La luminosité reste
   haute — ce sont les photos
   qui portent la lumière de la page, pas les aplats. */
.wp-block-image img,
.hero__photo img,
.entete-page__photo img,
.verset__photo img { filter: grayscale(1) contrast(1.1) brightness(.98); }

h1, h2, h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.012em;
  hyphens: none;
  text-wrap: balance;
  margin: 0;
}

.enveloppe { max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.enveloppe--etroite { max-width: var(--etroit); margin-inline: auto; padding-inline: var(--gouttiere); }

/* --------------------------------------------------------------------------
   Éléments partagés
   -------------------------------------------------------------------------- */

.pilule,
.wp-block-button.pilule .wp-block-button__link,
.wp-block-button.pilule--plein .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .85em 1.7em;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: transparent;
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.pilule:hover,
.wp-block-button.pilule .wp-block-button__link:hover,
.wp-block-button.pilule--plein .wp-block-button__link:hover { background: var(--charbon); border-color: #3A3A3A; }

.pilule--plein,
.wp-block-button.pilule--plein .wp-block-button__link { background: var(--orange); color: var(--nuit); border-color: var(--orange); }
.pilule--plein:hover,
.wp-block-button.pilule--plein .wp-block-button__link:hover { background: #FF9A45; border-color: #FF9A45; }

.surtitre {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.5rem;
}

.titre-section {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  text-align: center;
  margin: 0 auto;
  max-width: 16ch;
}

.chapeau {
  text-align: center;
  color: var(--gris);
  font-size: 14px;
  max-width: 52ch;
  margin: 1.4rem auto 0;
}

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

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: 22px 0;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
.entete.est-colle {
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--filet);
  padding: 14px 0;
}
.entete__rang { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.marque { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-style: italic; font-size: 19px; }
/* L'emblème de la marque remplace le logogramme tracé en CSS.
   Posé en image de fond et non en bloc image : il échappe ainsi au
   duotone, qui ne doit teinter que les photographies. */
.marque::before {
  content: '';
  width: 36px; height: 36px; flex: none;
  background: url('/wp-content/uploads/2026/10/al-hachir-embleme.png') center / contain no-repeat;
}

.navigation { display: flex; gap: 34px; font-size: 13px; color: var(--gris); }
.navigation .wp-block-navigation-item__content { transition: color .2s ease; text-decoration: none; }
.navigation .wp-block-navigation-item__content:hover,
.navigation .current-menu-item .wp-block-navigation-item__content { color: var(--ivoire); }



/* --------------------------------------------------------------------------
   Hero — la dominante de la page
   -------------------------------------------------------------------------- */

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: 0; }

.hero__photo { position: absolute; inset: 0; overflow: hidden; margin: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.6) 0%, rgba(10,10,10,.06) 26%, rgba(10,10,10,.1) 46%, rgba(10,10,10,.82) 86%, var(--noir) 100%),
    linear-gradient(to right, rgba(10,10,10,0) 38%, rgba(10,10,10,.45) 72%, rgba(10,10,10,.68) 100%);
}

.hero__contenu { position: relative; z-index: 2; width: 100%; padding-top: 180px; }

.hero__titraille { text-align: right; margin-bottom: clamp(44px, 7vw, 86px); }
.hero__grand {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.6rem, 12vw, 9.5rem);
  line-height: .92;
  letter-spacing: -.03em;
}
.hero__petit {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.5vw, 1.9rem);
  color: #C9C7C3;
  margin-top: .45em;
  letter-spacing: -.01em;
}

/* Carte de recherche — étroite et calée à droite, sous la titraille */
.recherche {
  width: min(470px, 100%);
  margin-left: auto;
  background: rgba(16,16,16,.66);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.recherche__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* blockGap de WordPress emet « .is-layout-flow > * { margin-block-end: 0 } » en
   (0,1,0), imprime APRES la feuille du theme : il bat .recherche { margin-bottom }
   a specificite egale. On remonte d'un cran, des deux cotes. */
.hero__contenu .recherche { margin-bottom: clamp(44px, 6vw, 72px); }
.recherche__bouton { margin-top: 10px; width: 100%; justify-content: center; }

.champ { position: relative; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  background: rgba(10,10,10,.5);
  border: 1px solid var(--filet);
  border-radius: 10px;
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  padding: 14px 16px;
  appearance: none;
  transition: border-color .2s ease;
}
.champ input::placeholder, .champ textarea::placeholder { color: #6F6C68; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: #6F6C68; }
.champ select { color: var(--gris); cursor: pointer; }
.champ select option { background: var(--charbon); color: var(--ivoire); }
.champ--fleche::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--gris);
  border-bottom: 1px solid var(--gris);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Bande du verset — section volontairement étroite et basse
   -------------------------------------------------------------------------- */

.verset { position: relative; padding: 0 0 clamp(70px, 8vw, 120px); margin-top: clamp(-120px, -7vw, -60px); z-index: 3; }
.verset__carte {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: var(--arche-plate);
          mask-image: var(--arche-plate);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  padding: 86px 54px 36px;
  text-align: center;
}
.verset__photo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.verset__photo img { width: 100%; height: 100%; object-fit: cover; }
.verset__photo::after { content: ''; position: absolute; inset: 0; background: rgba(10,10,10,.8); }
.verset__arabe {
  font-family: var(--arabe);
  font-size: clamp(1.3rem, 3.2vw, 1.95rem);
  line-height: 1.9;
  direction: rtl;
  margin: 0 0 .9rem;
}
.verset__fr { font-size: 12.5px; color: #C4C1BD; margin: 0; line-height: 1.75; }

/* --------------------------------------------------------------------------
   Confiance — large, très aérée, chiffres en sans-serif
   -------------------------------------------------------------------------- */

.confiance { padding-bottom: var(--bande); text-align: center; }
.confiance .titre-section { max-width: 20ch; }

.chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(50px, 6vw, 86px);
}
.chiffre { padding: 0 18px; }
.chiffre + .chiffre { border-left: 1px solid var(--filet); }
.chiffre__valeur {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
}
.chiffre__libelle { font-size: 11.5px; color: var(--gris); margin-top: .85rem; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   Forfaits — grille de trois, image sous arche
   -------------------------------------------------------------------------- */

.forfaits { padding-block: var(--bande); }
.forfaits--omra { background: #0C0C0C; }

.forfaits__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(50px, 6vw, 80px);
}

.forfait { display: flex; flex-direction: column; }

.forfait__visuel {
  aspect-ratio: 3 / 3.4;
  overflow: hidden;
  -webkit-mask-image: var(--arche);
          mask-image: var(--arche);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  margin-bottom: -56px;
}
.forfait__visuel img { width: 100%; height: 100%; object-fit: cover; }

.forfait__corps {
  position: relative;
  background: var(--charbon);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 26px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.forfait__nom { font-family: var(--sans); font-style: normal; font-size: 15px; font-weight: 400; letter-spacing: -.005em; margin: 0 0 18px; }

.forfait__liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.forfait__liste li { position: relative; padding-left: 17px; font-size: 11.5px; color: var(--gris); line-height: 1.5; }
.forfait__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: .42em;
  width: 8px; height: 4px;
  border-left: 1px solid #6F6C68;
  border-bottom: 1px solid #6F6C68;
  transform: rotate(-45deg);
}

.forfait__prix { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--filet); }
.forfait__prix-libelle { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: .45rem; }
.forfait__prix-valeur { display: block; font-family: var(--sans); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 300; line-height: 1.3; letter-spacing: -.015em; }
.forfait__action { margin-top: 18px; display: flex; gap: 0; }
.forfait__action .pilule { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   Services — gabarit différent : deux colonnes, image à gauche
   -------------------------------------------------------------------------- */

.services { padding-block: var(--bande); }
.services__liste { margin-top: clamp(50px, 6vw, 80px); display: grid; gap: 14px; }

.service {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
  background: var(--charbon);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 14px 26px 14px 14px;
  transition: border-color .25s ease;
}
.service:hover { border-color: #3A3A3A; }
.service__visuel { aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; }
.service__visuel img { width: 100%; height: 100%; object-fit: cover; }
.service__nom { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.2; margin: 0 0 .5rem; }
.service__texte { font-size: 12.5px; color: var(--gris); margin: 0; max-width: 56ch; }
.service::after { content: '\2197'; font-size: 20px; color: var(--gris); line-height: 1; }
.service__nom a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Devis — formulaire dans une arche tracée
   -------------------------------------------------------------------------- */

.devis { padding-block: var(--bande); }
.devis__cadre { position: relative; max-width: 880px; margin: clamp(50px, 6vw, 84px) auto 0; padding: clamp(58px, 6vw, 86px) clamp(26px, 5vw, 60px) clamp(44px, 5vw, 60px); }
.devis__cadre::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0.6,140 V40 C0.6,21 16,12 34,5.5 C41,3 47,0.6 50,0.6 C53,0.6 59,3 66,5.5 C84,12 99.4,21 99.4,40 V140' fill='rgba(20,20,20,.5)' stroke='%23262626' stroke-width='0.18'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.devis__grille { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.devis__pleine { grid-column: 1 / -1; }
.devis__legende { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin: 18px 0 2px; }
.devis__action { grid-column: 1 / -1; justify-self: center; margin-top: 16px; }

.oui-non { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--filet); border-radius: 10px; padding: 12px 16px; background: rgba(10,10,10,.5); }
.oui-non__titre { font-size: 12.5px; color: var(--gris); }
.oui-non__choix { display: flex; gap: 16px; }
.oui-non label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gris); cursor: pointer; }
.oui-non input { appearance: none; width: 12px; height: 12px; border: 1px solid #4A4A4A; border-radius: 50%; margin: 0; cursor: pointer; }
.oui-non input:checked { border-color: var(--ivoire); box-shadow: inset 0 0 0 3px var(--ivoire); }

/* --------------------------------------------------------------------------
   Témoignages — titre hors d'échelle en arrière-plan, cartes désalignées
   -------------------------------------------------------------------------- */

.avis { position: relative; padding-block: var(--bande); overflow: hidden; }
.avis__fantome {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(4.5rem, 14vw, 12rem);
  line-height: .84;
  color: #3E3E3E;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.avis .enveloppe { position: relative; }
.avis .enveloppe::before {
  content: '';
  display: block;
  position: relative;
  z-index: 2;
  width: 85px; height: 13px;
  margin-bottom: clamp(30px, 5vw, 60px);
  background: var(--ivoire);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M6.5 1l1.6 3.5 3.8.5-2.7 2.6.6 3.8-3.3-1.8-3.3 1.8.6-3.8L1.1 5l3.8-.5z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 17px 13px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M6.5 1l1.6 3.5 3.8.5-2.7 2.6.6 3.8-3.3-1.8-3.3 1.8.6-3.8L1.1 5l3.8-.5z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 17px 13px repeat-x;
}

.avis__nuage { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; min-height: 340px; }

.temoignage {
  background: rgba(20,20,20,.86);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 22px 24px;
}
.temoignage p { font-size: 12.5px; color: #B4B1AD; margin: 0 0 16px; line-height: 1.75; }
.temoignage cite { display: block; font-style: normal; font-size: 11px; color: var(--gris); letter-spacing: .03em; }

.temoignage--a { grid-column: 8 / 13; }
.temoignage--b { grid-column: 1 / 5; margin-top: 96px; }
.temoignage--c { grid-column: 6 / 11; margin-top: 44px; }

.avis__action { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */

.questions { padding-block: var(--bande); }
.questions__liste { margin-top: clamp(46px, 5vw, 72px); display: grid; gap: 10px; }

.question { background: var(--charbon); border: 1px solid var(--filet); border-radius: 12px; overflow: hidden; }
.questions__liste { counter-reset: question; }
.question { counter-increment: question; }
.question__bouton {
  margin: 0;
  display: grid;
  grid-template-columns: 16px 1fr 11px;
  align-items: center;
  gap: 18px;
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  line-height: 1.5;
  padding: 21px 24px;
  cursor: pointer;
}
.question__bouton::before { content: counter(question) "."; color: var(--gris); font-size: 12px; }
.question__bouton::after {
  content: '';
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--gris), var(--gris)) center / 11px 1px no-repeat,
    linear-gradient(var(--gris), var(--gris)) center / 1px 11px no-repeat;
  transition: background-size .3s ease;
}

.question__reponse { max-height: 0; overflow: hidden; transition: max-height .36s ease; }
.question__reponse p { margin: 0; padding: 0 24px 22px 58px; font-size: 12.5px; color: var(--gris); line-height: 1.8; }

.question.est-ouverte .question__bouton::after { background-size: 11px 1px, 1px 0; }
.question.est-ouverte .question__reponse { max-height: 320px; }

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

.pied { position: relative; padding-top: var(--bande); overflow: hidden; border-top: 1px solid var(--filet); }
.pied::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -8%;
  transform: translateX(-50%);
  width: min(760px, 110%);
  aspect-ratio: 100 / 140;
  opacity: .085;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M2,140 V70 C2,34 17,21 35,10 C42,6 47,2 50,2 C53,2 58,6 65,10 C83,21 98,34 98,70 V140' fill='none' stroke='%23F1F0EE' stroke-width='1'/%3E%3Cpath d='M18,140 V74 C18,46 30,35 44,26 C47,24 49,21 50,21 C51,21 53,24 56,26 C70,35 82,46 82,74 V140' fill='none' stroke='%23F1F0EE' stroke-width='1'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.pied__rang { position: relative; z-index: 2; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 60px); padding-bottom: clamp(50px, 6vw, 80px); }
.pied__baseline { font-size: 12.5px; color: var(--gris); margin: 18px 0 0; max-width: 34ch; }
.pied__titre { font-family: var(--sans); font-style: normal; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin: 0 0 18px; }
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 12.5px; }
.pied__liste a:hover { color: var(--azur); }
.pied__lettre { display: flex; gap: 8px; margin-top: 16px; }
.pied__lettre input { flex: 1; }
.wp-block-social-links.pied__social { gap: 9px; margin-top: 22px; padding: 0; font-size: 24px; }
.wp-block-social-links.pied__social .wp-social-link {
  width: 32px; height: 32px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: 50%;
  transition: border-color .25s ease;
}
.wp-block-social-links.pied__social .wp-social-link a { padding: 0; display: grid; place-items: center; width: 100%; height: 100%; }
.wp-block-social-links.pied__social .wp-social-link svg { width: 13px; height: 13px; fill: var(--gris); transition: fill .25s ease; }
.wp-block-social-links.pied__social .wp-social-link:hover { border-color: #3A3A3A; }
.wp-block-social-links.pied__social .wp-social-link:hover svg { fill: var(--ivoire); }

.pied__bas {
  position: relative; z-index: 2;
  border-top: 1px solid var(--filet);
  padding-block: 24px 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  color: #6F6C68;
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .recherche__grille { grid-template-columns: 1fr 1fr; }
  .service { grid-template-columns: 180px 1fr auto; }
  .pied__rang { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {

  .forfaits__grille { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .chiffres { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .chiffre:nth-child(3) { border-left: 0; }

  .service { grid-template-columns: 1fr; padding: 14px; }
  .service::after { display: none; }
  .service__visuel { aspect-ratio: 16 / 7; }

  .devis__grille { grid-template-columns: 1fr; }

  .avis__nuage { display: grid; grid-template-columns: 1fr; min-height: 0; }
  .temoignage--a, .temoignage--b, .temoignage--c { grid-column: auto; margin-top: 0; }
  .avis__fantome { font-size: clamp(3rem, 17vw, 6rem); white-space: normal; top: 50%; opacity: .85; }

  .pied__rang { grid-template-columns: 1fr; }
  .pied__bas { flex-direction: column; gap: 8px; }
}

@media (max-width: 520px) {
  .recherche__grille { grid-template-columns: 1fr; }
  .forfait__liste { grid-template-columns: 1fr; }
  .hero__titraille { text-align: left; }
  .oui-non { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* --------------------------------------------------------------------------
   Contact Form 7 — la maquette reproduit le DOM que le plugin produit, donc
   ces regles valent des deux cotes.
   -------------------------------------------------------------------------- */

/* CF7 passe son gabarit dans wpautop : chaque bloc de balisage se retrouve
   enrobe d'un <p> qui casse les flex et les grilles. display: contents le
   rend transparent a la mise en page, sans toucher au gabarit. */
.wpcf7 .champ > p,
.wpcf7 .oui-non > p { display: contents; }

/* Le <span> d'enrobage garde l'espace sous la ligne de base s'il reste
   inline : +5 a 13 px par champ. */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .champ select,
.wpcf7 .champ input,
.wpcf7 .champ textarea { display: block; }

.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 .wpcf7-response-output { display: none; }
.wpcf7-spinner { display: none; }
.wpcf7-not-valid-tip { color: #E6E3DF; font-size: 11px; margin-top: 6px; }

/* Les boutons radio arrivent enrobes dans <span class="wpcf7-list-item">,
   plus larges que des labels nus : le groupe Oui/Non passait a la ligne. */
.oui-non__choix { flex-wrap: nowrap; }
.oui-non .wpcf7-form-control.wpcf7-radio { display: flex; gap: 16px; }
.oui-non .wpcf7-list-item { margin: 0; display: inline-flex; }
.oui-non .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.oui-non .wpcf7-list-item-label { font-size: 12px; color: var(--gris); white-space: nowrap; }

/* Les deux boutons d'envoi reprennent la pastille. */
.wpcf7 .champ input[type="submit"] {
  width: 100%;
  background: var(--orange);
  color: var(--nuit);
  border: 1px solid var(--orange);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .01em;
  padding: .85em 1.7em;
  cursor: pointer;
  transition: background .25s ease;
}
.wpcf7 .champ input[type="submit"]:hover { background: #FF9A45; border-color: #FF9A45; }
.wpcf7 .champ.pilule input[type="submit"] { background: transparent; color: var(--ivoire); border-color: var(--filet); }
.wpcf7 .champ.pilule input[type="submit"]:hover { background: var(--charbon); border-color: #3A3A3A; }

/* La lettre d'information : le <form> s'interpose entre .pied__lettre et ses
   champs. Le premier enfant du formulaire est le fieldset cache, pas le champ. */
.pied__lettre .wpcf7,
.pied__lettre .wpcf7-form { width: 100%; }
.pied__lettre .wpcf7-form { display: flex; gap: 8px; align-items: flex-start; }
.pied__lettre .wpcf7-form > .champ:not(.pilule) { flex: 1; }
.pied__lettre .wpcf7 .champ input[type="submit"] { width: auto; }

/* --------------------------------------------------------------------------
   Pages internes — en-tête de page, blocs alternés, engagements
   Aucun débat esthétique ici : le système validé en phase 2 est repris tel quel.
   -------------------------------------------------------------------------- */

.entete-page { position: relative; min-height: 54svh; display: flex; align-items: flex-end; padding-bottom: clamp(44px, 6vw, 78px); }
.entete-page__photo { position: absolute; inset: 0; overflow: hidden; margin: 0; }
.entete-page__photo img { width: 100%; height: 100%; object-fit: cover; }
.entete-page__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,.88) 0%, rgba(10,10,10,.42) 40%, rgba(10,10,10,.9) 86%, var(--noir) 100%);
}
.entete-page__contenu { position: relative; z-index: 2; width: 100%; padding-top: 150px; text-align: center; }
.entete-page__titre { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.04; }
.entete-page__chapeau { color: #C4C1BD; font-size: 14px; max-width: 54ch; margin: 1.5rem auto 0; }

/* Bloc alterné : visuel sous arche d'un côté, texte de l'autre */
.duo { padding-block: var(--bande); }
.duo + .duo { padding-top: 0; }
.duo__rang { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: clamp(32px, 6vw, 90px); }
.duo--inverse .duo__rang { grid-template-columns: 1.15fr 1fr; }
.duo--inverse .duo__visuel { order: 2; }

.duo__visuel {
  aspect-ratio: 3 / 3.5;
  overflow: hidden;
  -webkit-mask-image: var(--arche);
          mask-image: var(--arche);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.duo__visuel img { width: 100%; height: 100%; object-fit: cover; }

.duo__titre { font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.14; margin-bottom: 1.4rem; }
.duo__texte { color: var(--gris); font-size: 13.5px; margin: 0 0 1.1rem; max-width: 56ch; }
.duo__liste { list-style: none; margin: 1.8rem 0 2.2rem; padding: 0; display: grid; gap: 11px; max-width: 48ch; }
.duo__liste li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--gris); }
.duo__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 9px; height: 5px;
  border-left: 1px solid #6F6C68;
  border-bottom: 1px solid #6F6C68;
  transform: rotate(-45deg);
}

/* Engagements — trois colonnes numérotées, sans visuel */
.engagements { padding-block: var(--bande); }
.engagements__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(50px, 6vw, 80px); }
.engagement { border-top: 1px solid var(--filet); padding-top: 26px; }
.engagement__num { font-family: var(--serif); font-style: italic; font-size: 2.2rem; color: #4A4A4A; line-height: 1; margin-bottom: 1rem; }
.engagement__titre { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: .8rem; }
.engagement__texte { color: var(--gris); font-size: 12.5px; margin: 0; }

/* Appel final */
.appel { padding-block: var(--bande); text-align: center; }
.appel .titre-section { max-width: 24ch; }
.appel__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 50px); }

@media (max-width: 860px) {
  .duo__rang, .duo--inverse .duo__rang { grid-template-columns: 1fr; }
  .duo--inverse .duo__visuel { order: 0; }
  .duo__visuel { max-width: 420px; margin-inline: auto; }
  .engagements__grille { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Adaptations Gutenberg
   Le CSS d'un bloc est imprimé APRÈS cette feuille : à spécificité égale,
   c'est le bloc qui gagne. Tout ce qui suit est donc plus spécifique, jamais
   seulement plus tardif.
   ========================================================================== */

/* L'attribut height= des blocs image l'emporte sur aspect-ratio sans ceci. */
img { max-width: 100%; height: auto; display: block; }

/* Neutralisation de l'espacement automatique — à spécificité NULLE.
   La version .wp-block-group > * écraserait toutes les marges des composants
   (voir blocs-gutenberg.md). La coupure réelle est dans theme.json. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
/* La règle ci-dessus est en (0,1,1) : elle écraserait le chevauchement
   négatif de l'arche sur la carte, écrit en (0,1,0). On le remonte. */
figure.wp-block-image.forfait__visuel { margin-bottom: -56px; }

/* core/button : la classe est sur le conteneur. Le neutraliser, sinon il
   hérite des règles écrites pour la maquette et double la pastille. */
.wp-block-button.pilule,
.wp-block-button.pilule--plein {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.wp-block-button.pilule::after,
.wp-block-button.pilule--plein::after { content: none; }
.wp-block-button .wp-block-button__link { text-decoration: none; }

/* Les boutons pleine largeur de la maquette (recherche, forfait, devis). */
.forfait__action .wp-block-button,
.forfait__action .wp-block-button__link { width: 100%; }
.devis__action .wp-block-button__link,
.avis__action .wp-block-button__link { width: auto; }

/* core/navigation */
.wp-block-navigation.navigation { font-size: 13px; color: var(--gris); }
.wp-block-navigation.navigation .wp-block-navigation__container { gap: 34px; list-style: none; padding-left: 0; }
.wp-block-navigation.navigation .wp-block-navigation__responsive-container-open,
.wp-block-navigation.navigation .wp-block-navigation__responsive-container-close { color: var(--ivoire); }
/* Le panneau mobile s'ouvre blanc sur blanc sans ceci : la feuille qui pose
   le blanc n'est pas inspectable depuis la page. Seul !important justifié. */
.wp-block-navigation.navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(10, 10, 10, .985) !important;
  color: var(--ivoire) !important;
  padding-top: 70px;
}
.wp-block-navigation.navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 22px; }
.wp-block-navigation.pied__menu { font-size: 12.5px; }
.wp-block-navigation.pied__menu .wp-block-navigation__container { display: grid; gap: 11px; list-style: none; padding-left: 0; }

/* core/quote : le bloc pose sa propre bordure et ses marges. */
.wp-block-quote.temoignage {
  border: 1px solid rgba(255,255,255,.09);
  border-left: 1px solid rgba(255,255,255,.09);
  padding: 22px 24px;
  margin: 0;
}
.wp-block-quote.temoignage cite { font-style: normal; }
/* Le margin:0 ci-dessus est en (0,2,0) : il battrait les décalages des
   témoignages, écrits en (0,1,0). On les remonte au même niveau. */
.wp-block-quote.temoignage--b { margin-top: 96px; }
.wp-block-quote.temoignage--c { margin-top: 44px; }

/* core/list */
.wp-block-list.forfait__liste,
.wp-block-list.duo__liste,
.wp-block-list.pied__liste { list-style: none; padding-left: 0; }

/* core/heading : la classe de la maquette suffit, mais le bloc ajoute
   wp-block-heading, qui n'apporte aucun style — rien à neutraliser. */

/* Accessibilité au clavier — le thème n'a pas d'autre indicateur de focus. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ivoire);
  outline-offset: 3px;
  border-radius: 6px;
}

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


/* --------------------------------------------------------------------------
   Journal — liste des actualités et article isolé
   L'en-tête est en position fixed : une page sans .entete-page doit dégager
   elle-même la hauteur de la barre, sinon son premier élément passe dessous.
   -------------------------------------------------------------------------- */

.journal { padding-block: calc(var(--bande) + 72px) var(--bande); }

/* Liste éditoriale : un filet par entrée, jamais de carte — la profondeur du
   thème ne vient pas d'une ombre. */
.journal .wp-block-post-template { list-style: none; margin: clamp(50px, 6vw, 80px) 0 0; padding: 0; }
.journal .wp-block-post-template > li { border-top: 1px solid var(--filet); padding-block: clamp(26px, 3vw, 40px); }
.journal .wp-block-post-title { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.14; margin: 0; }
.journal .wp-block-post-title a { transition: color .25s ease; }
.journal .wp-block-post-title a:hover { color: var(--gris); }
.journal .wp-block-post-excerpt { margin: .9rem 0 0; }
.journal .wp-block-post-excerpt__excerpt { color: var(--gris); font-size: 13.5px; }

/* Rien à lire encore : l'état vide est composé, pas laissé brut. */
.journal .wp-block-query-no-results {
  border-top: 1px solid var(--filet);
  margin-top: clamp(50px, 6vw, 80px);
  padding-top: clamp(26px, 3vw, 40px);
}
.journal .wp-block-query-no-results p { color: var(--gris); font-size: 13.5px; text-align: center; }

/* Article isolé — mesure de lecture sur l'enveloppe étroite (840px). */
.article { padding-block: calc(var(--bande) + 72px) var(--bande); }
.article__titre { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0; }
.article__date {
  color: var(--gris);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 1.4rem;
}
.article__visuel { margin-top: clamp(32px, 4vw, 50px); }
.article__visuel img { width: 100%; }

/* blockGap vaut 0 dans theme.json : l'espacement du corps d'article se pose
   ici, sinon les paragraphes se collent (p a margin:0 en base). */
.article__corps { margin-top: clamp(32px, 4vw, 50px); }
.article__corps > * + * { margin-top: 1.4rem; }
.article__corps h2, .article__corps h3 { margin-top: 2.6rem; }
.article__corps p, .article__corps li { color: #C4C1BD; font-size: 14.5px; }
.article__corps a { text-decoration: underline; text-underline-offset: 3px; }
.article__corps ul, .article__corps ol { padding-left: 20px; }
.article__corps blockquote { border-left: 1px solid var(--filet); padding-left: 22px; }


/* --------------------------------------------------------------------------
   Pastille WhatsApp flottante
   Contour et non aplat : l'aplat ivoire reste réservé à l'action principale
   de la page. Posée sous l'en-tête (z-index 60) et au-dessus du contenu.
   -------------------------------------------------------------------------- */

.flottant {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .8em 1.4em;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: rgba(20, 20, 20, .92);
  backdrop-filter: blur(14px);
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .01em;
  transition: background .25s ease, border-color .25s ease;
}
.flottant:hover { background: var(--charbon); border-color: #3A3A3A; }

.flottant__icone { width: 17px; height: 17px; flex: none; }

/* Sous 520px la place manque pour le libellé : la pastille devient ronde.
   Le nom du service reste annoncé par aria-label sur le lien. */
@media (max-width: 520px) {
  .flottant { padding: .85em; }
  .flottant__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* ==========================================================================
   ESSAI CLAIR — fond blanc
   Bloc ajouté en fin de feuille. Il redéfinit les jetons, puis ne corrige à la
   main que ce qui était écrit en dur pour du sombre. La version bleu nuit
   reste entière au-dessus : retirer ce bloc suffit à y revenir.
   Repère de début : AL-HACHIR-ESSAI-CLAIR-DEBUT
   ========================================================================== */

:root {
  --noir:       #FFFFFF;   /* fond de page */
  --charbon:    #F2F2F2;   /* surface secondaire et survols */
  --filet:      #E0E0E0;   /* filets décoratifs, aussi discrets qu'avant */
  --ivoire:     #141414;   /* encre principale, 13,7:1 */
  --gris:       #5A5A5A;   /* texte secondaire, 6,9:1 sur blanc */
  --fantome:    #EDEDED;   /* titre hors d'échelle */
  --azur:       #141414;   /* survol des liens, bleu moyen du logo */
  --filet-fort: #949494;   /* contour des éléments avec lesquels on interagit */
}

/* --------------------------------------------------------------------------
   Les trois zones photographiques restent sombres
   Poser du texte bleu nuit sur une photo pleine largeur serait illisible.
   Ces conteneurs redéfinissent les jetons pour leurs descendants : la cascade
   des variables fait le reste, aucune règle de texte n'est à reprendre.
   -------------------------------------------------------------------------- */

.hero__contenu,
.entete-page__contenu,
.verset__carte,
.recherche {
  --ivoire:     #F1F0EE;
  --gris:       #8C8C8C;
  --filet:      #3A3A3A;
  --filet-fort: #4A4A4A;
  color: var(--ivoire);
}

/* Les dégradés finissaient sur var(--noir), devenu blanc : le bas des photos
   serait passé au blanc sous un texte clair. On ferme sur du bleu nuit. */
.hero__photo::after {
  background:
    linear-gradient(to bottom, rgba(10,10,10,.6) 0%, rgba(10,10,10,.06) 26%, rgba(10,10,10,.1) 46%, rgba(10,10,10,.82) 86%, rgba(10,10,10,.96) 100%),
    linear-gradient(to right, rgba(10,10,10,0) 38%, rgba(10,10,10,.45) 72%, rgba(10,10,10,.68) 100%);
}
.entete-page__photo::after {
  background: linear-gradient(to bottom, rgba(10,10,10,.88) 0%, rgba(10,10,10,.42) 40%, rgba(10,10,10,.9) 86%, rgba(10,10,10,.96) 100%);
}

/* --------------------------------------------------------------------------
   En-tête
   Il surplombe la photo du hero. Transparent, la navigation bleu nuit
   tomberait sur une image sombre : il est donc opaque dès le chargement.
   -------------------------------------------------------------------------- */

.entete {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--filet);
}
.entete.est-colle { background: rgba(255,255,255,.96); }

.wp-block-navigation.navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(255,255,255,.985) !important;
  color: var(--ivoire) !important;
}

/* --------------------------------------------------------------------------
   Formulaires
   Clairs partout, sauf dans la carte de recherche du hero qui reste sombre.
   Le contour des champs passe à --filet-fort : un filet décoratif à 1,3:1 ne
   suffit pas à délimiter un élément sur lequel on clique.
   -------------------------------------------------------------------------- */

.champ input,
.champ select,
.champ textarea {
  background: #FFFFFF;
  border-color: var(--filet-fort);
}
.champ input::placeholder,
.champ textarea::placeholder { color: #6B6B6B; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: #141414; }

.recherche .champ input,
.recherche .champ select,
.recherche .champ textarea { background: rgba(10,10,10,.5); }
.recherche .champ input::placeholder,
.recherche .champ textarea::placeholder { color: #8C8C8C; }

.oui-non { background: #F7F7F7; border-color: var(--filet-fort); }
.oui-non input { border-color: #4A4A4A; }

.wpcf7-not-valid-tip { color: #A85200; }

/* Le cadre en arche du devis : tracé clair, l'arche ne tient plus que par son
   contour puisque son remplissage se confond avec la page. */
.devis__cadre::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0.6,140 V40 C0.6,21 16,12 34,5.5 C41,3 47,0.6 50,0.6 C53,0.6 59,3 66,5.5 C84,12 99.4,21 99.4,40 V140' fill='rgba(247,247,247,.9)' stroke='%23D0D0D0' stroke-width='0.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   Sections écrites en dur pour du sombre
   -------------------------------------------------------------------------- */

.forfaits--omra { background: #F6F6F6; }

.avis__fantome { color: var(--fantome); }

.temoignage { background: #F6F6F6; }
.wp-block-quote.temoignage { border-color: #E4E4E4; border-left-color: #E4E4E4; }
.temoignage p { color: #4A4A4A; }

.engagement__num { color: #C0C0C0; }

.article__corps p, .article__corps li { color: #3C3C3C; }

.pied__bas { color: #5E5E5E; }

/* Les deux arches du pied étaient tracées en ivoire : invisibles sur blanc. */
.pied::before {
  opacity: .12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M2,140 V70 C2,34 17,21 35,10 C42,6 47,2 50,2 C53,2 58,6 65,10 C83,21 98,34 98,70 V140' fill='none' stroke='%23141414' stroke-width='1'/%3E%3Cpath d='M18,140 V74 C18,46 30,35 44,26 C47,24 49,21 50,21 C51,21 53,24 56,26 C70,35 82,46 82,74 V140' fill='none' stroke='%23141414' stroke-width='1'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}

/* La pastille flottante doit rester lisible sur une page blanche : aplat bleu
   nuit plutôt que contour, qui se perdrait. */
.flottant {
  background: #141414;
  border-color: #141414;
  color: #F1F0EE;
}
.flottant:hover { background: #2E2E2E; border-color: #2E2E2E; }

.pied .marque::before { width: 46px; height: 46px; }

/* --------------------------------------------------------------------------
   Confirmation d'envoi
   Contact Form 7 écrit sa réponse dans .wpcf7-response-output, que la maquette
   masque : sans ce panneau, rien ne confirmerait l'envoi à l'écran. Il est
   posé par assets/app.js à la place du formulaire.
   -------------------------------------------------------------------------- */

.confirmation { position: relative; text-align: center; padding-block: clamp(26px, 4vw, 44px); }
.confirmation:focus { outline: none; }
.confirmation__titre {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.14;
  margin: 0;
}
.confirmation__texte {
  color: var(--gris);
  font-size: 13.5px;
  max-width: 46ch;
  margin: 1.1rem auto 0;
}
.confirmation__action { margin-top: clamp(22px, 3vw, 32px); }

/* AL-HACHIR-ESSAI-CLAIR-FIN */

/* Grille de forfaits à deux cartes. */
.forfaits__grille--duo { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
@media (max-width: 860px) {
  .forfaits__grille--duo { grid-template-columns: 1fr; max-width: 420px; }
}

/* Vidéo de présentation : monochrome au repos, couleur à la lecture. */
.presentation { padding-block: var(--bande); }
.presentation__media { max-width: 780px; margin: clamp(40px, 5vw, 64px) auto 0; }
.presentation__media .wp-block-video { margin: 0; }
.presentation__media video { display: block; width: 100%; height: auto; background: #0A0A0A; filter: grayscale(1) contrast(1.1) brightness(.98); transition: filter .6s ease; }
.presentation__media.est-lue video { filter: none; }
.confiance__action { margin-top: clamp(40px, 5vw, 60px); justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .presentation__media video { transition: none; }
}

/* AL-HACHIR-ENTETE-DEBUT
   Trois paliers : téléphone (marque + menu plein écran), tablette dès 720px
   (la pastille de devis reparaît), bureau dès 1100px (menu en ligne).
   L'ancien réglage inversait les deux : menu en ligne dès 600px alors que
   la pastille disparaîssait dès 860px. */
.marque { font-size: clamp(15px, .5vw + 13px, 19px); gap: 10px; }
.marque a { white-space: nowrap; }
.marque::before { width: clamp(34px, 2.6vw, 44px); height: clamp(34px, 2.6vw, 44px); }
.pied .marque::before { width: 46px; height: 46px; }

.wp-block-navigation.navigation { font-size: 14px; font-weight: 400; }
.wp-block-navigation.navigation .wp-block-navigation__container { gap: 30px; }

.entete .wp-block-buttons { display: none; }
@media (min-width: 720px) {
  .entete .wp-block-buttons { display: flex; }
}

@media (min-width: 600px) and (max-width: 1099px) {
  .navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (min-width: 1100px) and (max-width: 1319px) {
  .wp-block-navigation.navigation { font-size: 13px; }
  .wp-block-navigation.navigation .wp-block-navigation__container { gap: 22px; }
}

/* Tant que le menu est replié, le bouton burger rejoint la pastille à droite
   au lieu de flotter au centre entre la marque et elle. */
@media (max-width: 1099px) {
  .entete__rang > .navigation { margin-left: auto; }
}

/* L'en-tête porte un backdrop-filter : il devient donc le bloc conteneur des
   descendants en position fixed, et le menu plein écran se retrouvait rogné
   à la hauteur de la barre. On lui rend les dimensions de la fenêtre. */
.entete .wp-block-navigation__responsive-container.is-menu-open {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}

/* Mise en page du menu plein écran : liens alignés sur la gouttière du site,
   à une taille lisible au pouce, et non collés au bord droit. */
.entete .is-menu-open .wp-block-navigation__responsive-close { width: 100%; max-width: 1260px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }
.entete .is-menu-open .wp-block-navigation__responsive-dialog { width: 100%; }
.entete .is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 26px; }
.entete .is-menu-open .wp-block-navigation-item__content { font-size: clamp(20px, 4.2vw, 26px); }
.entete .is-menu-open .wp-block-navigation__responsive-container-close { right: clamp(20px, 5vw, 64px); }
/* AL-HACHIR-ENTETE-FIN */

/* AL-HACHIR-NAV-DEBUT
   La page courante porte une pastille : contour 1px, rayon 999px, le même
   vocabulaire que les boutons du site. Le repère ne tient pas qu'à la couleur,
   la graisse change aussi. Le menu plein écran garde ses liens nus. */
.entete__rang > .navigation .wp-block-navigation__container { gap: 4px; }
.entete__rang > .navigation .wp-block-navigation-item__content {
  padding: .55em 1.15em;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color .25s ease, color .25s ease;
}
.entete__rang > .navigation .wp-block-navigation-item__content:hover {
  border-color: var(--filet);
  color: var(--ivoire);
}
.entete__rang > .navigation .current-menu-item > .wp-block-navigation-item__content {
  border-color: var(--filet);
  color: var(--ivoire);
  font-weight: 500;
}
.entete .is-menu-open .wp-block-navigation-item__content {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: inherit;
}

/* Palier bureau étroit : pastilles plus serrées pour tenir la largeur. */
@media (min-width: 1100px) and (max-width: 1319px) {
  .entete__rang > .navigation .wp-block-navigation__container { gap: 2px; }
  .entete__rang > .navigation .wp-block-navigation-item__content { padding: .5em .8em; }
}

/* Un menu doit être franc : fond plein, pas de page qui transparaît. */
.entete .wp-block-navigation.navigation .wp-block-navigation__responsive-container.is-menu-open { background-color: #FFFFFF !important; }
/* AL-HACHIR-NAV-FIN */

/* AL-HACHIR-FOND-DEBUT
   La barre se fond dans le visuel d'en-tête et redevient pleine dès qu'on
   défile. Sur les pages sans visuel — confidentialité, actualités, articles,
   404 — elle reste pleine. C'est l'état par défaut, donc aussi celui des
   navigateurs qui ignorent :has() : en cas d'échec, on retombe sur le sûr. */
body:has(.hero, .entete-page) .entete:not(.est-colle) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body:has(.hero, .entete-page) .entete:not(.est-colle) .marque,
body:has(.hero, .entete-page) .entete:not(.est-colle) .marque a { color: #F1F0EE; }
body:has(.hero, .entete-page) .entete:not(.est-colle) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { color: #D5D2CE; }
body:has(.hero, .entete-page) .entete:not(.est-colle) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { color: #FFFFFF; border-color: rgba(255,255,255,.3); }
body:has(.hero, .entete-page) .entete:not(.est-colle) .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content { color: #FFFFFF; border-color: rgba(255,255,255,.42); }
body:has(.hero, .entete-page) .entete:not(.est-colle) .wp-block-button__link { color: #F1F0EE; border-color: rgba(255,255,255,.42); }
body:has(.hero, .entete-page) .entete:not(.est-colle) .wp-block-navigation__responsive-container-open { color: #F1F0EE; }

/* Passage en douceur du transparent au plein. */
.entete .marque, .entete .marque a, .entete .wp-block-navigation-item__content,
.entete .wp-block-button__link, .entete .wp-block-navigation__responsive-container-open {
  transition: color .3s ease, border-color .3s ease;
}
/* AL-HACHIR-FOND-FIN */

/* AL-HACHIR-PIED-DEBUT
   Le menu du pied reprend le vocabulaire de l'en-tête : même corps, même gris
   au repos, même pastille sur la page courante. La liste de contact garde
   son encre : ce sont des informations, pas de la navigation. */
.wp-block-navigation.pied__menu { font-size: 14px; font-weight: 400; color: var(--gris); }
.wp-block-navigation.pied__menu .wp-block-navigation__container { gap: 4px; justify-items: start; }
.pied__menu .wp-block-navigation-item__content {
  padding: .45em 1.05em;
  margin-left: -1.05em;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--gris);
  transition: border-color .25s ease, color .25s ease;
}
.pied__menu .wp-block-navigation-item__content:hover { border-color: var(--filet); color: var(--ivoire); }
.pied__menu .current-menu-item > .wp-block-navigation-item__content {
  border-color: var(--filet);
  color: var(--ivoire);
  font-weight: 500;
}

/* L'ancien survol de la liste de contact pointait vers --azur, reliquat du
   thème bleu, qui vaut aujourd'hui la même encre que le texte : il ne se
   passait rien. Un filet sous le lien le remplace. */
.pied__liste a { text-decoration: none; text-underline-offset: 4px; }
.pied__liste a:hover { color: var(--ivoire); text-decoration: underline; }

/* Le survol des réseaux virait vers #3A3A3A, un gris du thème sombre. */
.wp-block-social-links.pied__social .wp-social-link:hover { border-color: var(--filet-fort); }

/* La pastille WhatsApp flotte en bas à droite et recouvrait le lien
   « Confidentialité » sur grand écran, la ligne de droits sur tablette :
   place réservée à la pastille dans la dernière ligne du pied. */
@media (min-width: 861px) {
  .pied__bas { padding-right: 172px; }
}
@media (max-width: 860px) {
  .pied__bas { padding-bottom: 80px; }
}

/* Sur petit écran la gouttière ne fait que 20px : on resserre le débord de
   la pastille pour qu'elle ne frôle pas le bord, en gardant le texte aligné
   sur la colonne. */
@media (max-width: 860px) {
  .pied__menu .wp-block-navigation-item__content { padding-inline: .7em; margin-left: -.7em; }
}
/* AL-HACHIR-PIED-FIN */

/* AL-HACHIR-LISIBILITE-DEBUT
   Le texte courant passe de la graisse 300 à 400 : à 13-14px, le 300 était
   trop fin pour un gris secondaire. Les titres sont déjà en 400 et ne
   bougent pas. Trois éléments d'affichage gardent leur 300 : la marque, la
   signature du héros et le titre fantôme des avis. */
p, li, label, input, textarea, select { font-weight: 400; }
.marque, .marque a, .hero__petit, .avis__fantome { font-weight: 300; }

/* Les icônes sociales tiraient leur couleur de la palette (#8C8C8C, 3,4:1)
   et non du gris du thème : la règle manquait de poids pour l'emporter. */
.pied .wp-block-social-links.pied__social .wp-social-link svg { fill: var(--gris); }
/* AL-HACHIR-LISIBILITE-FIN */

/* AL-HACHIR-OMRA-2COL
   Quatre départs : deux colonnes plutôt que trois, pour éviter une carte
   seule sur la deuxième ligne. Les visuels y gagnent en taille. */
.forfaits--omra .forfaits__grille { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin-inline: auto; }
@media (max-width: 860px) {
  .forfaits--omra .forfaits__grille { grid-template-columns: 1fr; max-width: 420px; }
}