/* ==========================================================================
   PRECELYA — feuille de style unique (phase 2, 18/10/2026)
   Identité d'avril conservée : crème #FAFAF8 · bleu nuit #0F1E3C · bleu poudré #7FA7C4 · ligne #E8E5DE
   · actif #1E3A5F · Fraunces (titres) + Inter (texte) · style scandinave : grands titres, beaucoup d'air.
   Mobile d'abord (règles de base = téléphone, puis @media min-width). Contraste AA : le bleu poudré ne sert
   qu'aux filets et aux fonds sombres ; sur fond crème, le texte d'accent est --accent-texte.
   Aucun texte caché (pas de display:none sur du contenu, hors menu mobile fermé).
   Quatre langues (19/10/2026) : propriétés LOGIQUES (margin-inline, padding-inline, inset-inline, text-align: start,
   border-inline-start…) partout où le sens compte, pour que <html dir="rtl"> (arabe) retourne la mise en page sans
   règle de plus ; ce qui reste physique est volontaire (dessin d'une coche, ombres symétriques, décor). Exceptions
   RTL explicites en fin de feuille (flèches, séparateur du fil d'Ariane, dégradé du héros, flèche des listes).
   ========================================================================== */

:root {
  --bg: #FAFAF8;
  --text: #0F1E3C;
  --text-soft: rgba(15, 30, 60, 0.74);
  --accent: #7FA7C4;
  --accent-texte: #3F6A8A;
  --bronze: #B8955A;        /* 21/10/2026 : bronze mat du logo, décor seulement (losanges, filets) */
  --bronze-texte: #8A6B2F;  /* bronze foncé lisible sur crème (surtitres) */
  --accent-pale: #EDF2F6;
  --line: #E8E5DE;
  --active: #1E3A5F;
  --blanc: #FFFFFF;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gouttiere: 20px;
  --largeur: 1120px;
  --prose: 720px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--active); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--active); outline-offset: 3px; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em; line-height: 1.12; color: var(--text); }
h1 em, h2 em { font-style: italic; font-weight: 400; }
strong { font-weight: 600; }
main:focus { outline: none; }

/* Lien d'évitement : hors écran jusqu'au focus clavier */
.lien-evitement {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 300;
  background: var(--text); color: var(--bg); padding: 10px 16px; text-decoration: none; font-size: 14px;
}
.lien-evitement:focus { top: 12px; color: var(--bg); }

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 248, 0.97);
  border-bottom: 1px solid var(--line);
}
/* Pas de backdrop-filter ici : il ferait de l'en-tête le bloc conteneur du menu mobile (position: fixed) et le couperait. */
.entete__barre {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--gouttiere);
  min-height: 60px;
}
.entete__logo {
  font-family: var(--serif); font-weight: 400; font-size: 19px;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--text); text-decoration: none; margin-inline-end: auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
/* Logo (21/10/2026) : monogramme PY vectorisé (src/img/logo) devant le nom, en-tête et pied */
.entete__monogramme { width: 44px; height: 44px; display: block; flex: none; }
.pied__logo { display: inline-flex; align-items: center; gap: 14px; }
.pied__monogramme { width: 56px; height: 56px; display: block; flex: none; }
.entete__menu { display: none; }
.entete__langue {
  font-size: 12px; letter-spacing: 1.5px; font-weight: 500; color: var(--text);
  text-decoration: none; padding: 8px 4px; display: none;
}
/* Sélecteur à plusieurs langues (gabarit à quatre langues) : <details> natif, caché sous 1 080 px comme l'ancien lien
   (les langues sont alors dans le menu mobile et le pied). Liste ouverte sous le bouton, alignée sur son bord de fin. */
.langues { position: relative; display: none; }
.langues__bouton {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 4px;
  font-size: 12px; letter-spacing: 1.5px; font-weight: 500; color: var(--text);
}
.langues__bouton::-webkit-details-marker { display: none; }
.langues__bouton::after {
  content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s;
}
.langues[open] .langues__bouton::after { transform: translateY(1px) rotate(-135deg); }
.langues__liste {
  position: absolute; top: 100%; inset-inline-end: 0; z-index: 120; min-width: 168px; padding: 6px 0;
  background: var(--blanc); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(15, 30, 60, 0.12);
}
.langues__liste a { display: block; padding: 10px 18px; font-size: 15px; color: var(--text); text-decoration: none; white-space: nowrap; }
.langues__liste a:hover { background: var(--accent-pale); }
.langues__liste a[aria-current] { font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
[dir="rtl"] .langues__liste a[aria-current] { box-shadow: inset -2px 0 0 var(--accent); }
.entete__cta {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500;
  padding: 10px 12px; background: var(--text); color: var(--bg); text-decoration: none; white-space: nowrap;
  transition: background 0.3s;
  /* Cible tactile ≥ 44 px de haut (audit global du 18/10, M-3) */
  min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box;
}
.entete__cta:hover { background: var(--active); color: var(--bg); }
.entete__burger {
  width: 48px; height: 48px; margin-inline-end: -10px; flex-shrink: 0; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.entete__burger span { display: block; width: 24px; height: 1px; background: var(--text); transition: transform 0.3s, opacity 0.3s; }
.entete__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.entete__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 61px 0 0 0; z-index: 99;
  background: var(--text); color: var(--bg);
  padding: 40px var(--gouttiere); overflow-y: auto;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { display: flex; flex-direction: column; gap: 6px; }
.menu-mobile a {
  font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.25;
  color: var(--bg); text-decoration: none; display: inline-block; padding: 6px 0;
}
.menu-mobile a[aria-current="page"] { color: var(--accent); }
.menu-mobile :focus-visible { outline-color: var(--accent); }
.menu-mobile .menu-mobile__langues { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(250, 250, 248, 0.18); }
.menu-mobile__langues-titre { display: block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(250, 250, 248, 0.75); margin-bottom: 4px; }
.menu-mobile .menu-mobile__langues ul { flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
.menu-mobile .menu-mobile__langues a { font-family: var(--sans); font-size: 17px; font-weight: 400; padding: 10px 0; }
.menu-mobile .menu-mobile__langues a[aria-current] { color: var(--accent); }
.menu-mobile__baseline { margin-top: 48px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(250, 250, 248, 0.75); }

/* Très petits écrans : l'en-tête (logo + « Demander un prix » + menu) doit tenir sans débordement jusqu'à 320 px */
@media (max-width: 419px) {
  .entete__barre { padding-inline: 16px; gap: 8px; }
  .entete__logo { font-size: 16px; letter-spacing: 2.5px; gap: 8px; }
  .entete__monogramme { width: 36px; height: 36px; }
  .entete__cta { font-size: 10px; letter-spacing: 0.6px; padding: 9px 9px; }
}
@media (max-width: 349px) {
  .entete__logo { font-size: 14px; letter-spacing: 1.5px; gap: 6px; }
  .entete__monogramme { width: 32px; height: 32px; }
  .entete__cta { letter-spacing: 0; padding: 8px 7px; }
}
@media (min-width: 1080px) and (max-width: 1199px) {
  .entete__logo { letter-spacing: 3px; gap: 8px; }
  .entete__monogramme { width: 40px; height: 40px; }
}
/* Menu en ligne seulement quand les 7 libellés tiennent sur UNE ligne (vague E, 19/10/2026 : à 800-1 000 px, « CDG ↔ Paris »
   se repliait sur 3 lignes) ; en dessous de 1 080 px, burger comme sur téléphone (seuil repris dans main.js). */
@media (min-width: 1080px) {
  .entete__barre { padding: 14px 24px; gap: 18px; }
  .entete__logo { font-size: 21px; margin-inline-end: 0; }
  /* 21/10/2026 : avec le monogramme, l'en-tête débordait de 12 px à 1 080 px (menu ES à 7 entrées) : logo un peu plus serré jusqu'à 1 199 px */
  .entete__menu { display: block; margin-inline-end: auto; }
  .entete__menu ul { display: flex; gap: 16px; }
  .entete__menu a { font-size: 14px; color: var(--text); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
  .entete__menu a:hover, .entete__menu a[aria-current="page"] { border-bottom-color: var(--accent); }
  .entete__langue { display: inline-block; }
  .langues { display: block; }
  .entete__cta { padding: 12px 14px; letter-spacing: 1.2px; }
  .entete__burger, .menu-mobile { display: none !important; }
}
/* Largeur mesurée au navigateur (FR, la plus longue) : logo 142 + menu 631 + langue 27 + appel 152 + écarts ≈ 1 054 px à 1 080 */
@media (min-width: 1280px) {
  .entete__barre { padding: 14px 40px; gap: 28px; }
  .entete__menu ul { gap: 26px; }
  .entete__cta { padding: 12px 22px; letter-spacing: 2.2px; }
}

/* ==========================================================================
   BANDEAU « PRIX PROVISOIRES » — discret mais visible, sous l'en-tête
   ========================================================================== */
.bandeau-prix {
  background: var(--accent-pale); border-bottom: 1px solid var(--line);
  padding: 8px var(--gouttiere); text-align: center;
}
.bandeau-prix p { font-size: 13px; line-height: 1.45; color: var(--text); }
/* Bandeau « version en relecture » (langue non publiée, site.json → langues) : même place, fond crème rayé d'un filet */
.bandeau-langue {
  background: var(--bg); border-bottom: 1px solid var(--line); border-top: 2px solid var(--accent);
  padding: 8px var(--gouttiere); text-align: center;
}
.bandeau-langue p { font-size: 13px; line-height: 1.45; color: var(--text); font-weight: 500; }

/* ==========================================================================
   HÉROS
   ========================================================================== */
.heros {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #081226 0%, #142a47 55%, #0F1E3C 100%);
  color: var(--bg);
  padding: 72px var(--gouttiere) 64px;
}
/* décor CSS (aucune image) : un halo bleu poudré et un filet */
.heros::before {
  content: ""; position: absolute; inset-inline-end: -20%; top: -30%; width: 80vw; height: 80vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(127, 167, 196, 0.22) 0%, rgba(127, 167, 196, 0) 65%);
  pointer-events: none;
}
.heros::after {
  content: ""; position: absolute; inset-inline: var(--gouttiere); bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(127, 167, 196, 0.6), rgba(127, 167, 196, 0));
}
.heros__interieur { position: relative; max-width: var(--largeur); margin: 0 auto; }
.heros .surtitre { color: var(--accent); }
.heros h1 { color: var(--bg); font-size: clamp(40px, 9vw, 96px); line-height: 1.03; letter-spacing: -0.02em; max-width: 920px; margin-bottom: 24px; }
.heros__texte { font-size: 17px; line-height: 1.65; max-width: 560px; color: rgba(250, 250, 248, 0.88); margin-bottom: 36px; }
.heros .btn--principal { background: var(--bg); color: var(--text); }
.heros .btn--principal:hover { background: var(--accent); color: var(--text); }
.heros .btn--secondaire { border-color: rgba(250, 250, 248, 0.6); color: var(--bg); }
.heros .btn--secondaire:hover { background: rgba(250, 250, 248, 0.12); color: var(--bg); }
.heros__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; font-size: 13px; color: rgba(250, 250, 248, 0.85); }
.heros__points li::before { content: "—"; content: "—" / ""; color: var(--accent); margin-inline-end: 8px; }

/* En-tête de page intérieure : clair, grand titre, beaucoup d'air */
.tete-page { padding: 28px var(--gouttiere) 8px; }
.tete-page__interieur { max-width: var(--largeur); margin: 0 auto; }
.tete-page h1 { font-size: clamp(36px, 7vw, 72px); line-height: 1.05; letter-spacing: -0.02em; max-width: 900px; margin: 18px 0 20px; }
.tete-page__texte { font-size: 17px; color: var(--text-soft); max-width: var(--prose); }

@media (min-width: 768px) {
  :root { --gouttiere: 40px; }
  .heros { padding: 120px var(--gouttiere) 104px; }
  .tete-page { padding-top: 44px; }
}

.surtitre {
  display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase;
  font-weight: 600; color: var(--bronze-texte); margin-bottom: 18px;
}
/* Losange bronze devant chaque surtitre : rappel du logo (21/10/2026) */
.surtitre::before { content: "\25C6"; font-size: 7px; color: var(--bronze); margin-inline-end: 10px; vertical-align: 2px; letter-spacing: 0; }
.heros .surtitre, .pied .surtitre { color: var(--bronze); }
.cta__sceau { width: 110px; height: 110px; display: block; margin: 0 auto 28px; }

/* ==========================================================================
   SECTIONS ET TEXTE
   ========================================================================== */
.section { padding: 56px var(--gouttiere); }
.section--alt { background: rgba(15, 30, 60, 0.03); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--sombre { background: var(--text); color: var(--bg); }
.section--sombre h2, .section--sombre h3 { color: var(--bg); }
.section--sombre p, .section--sombre li { color: rgba(250, 250, 248, 0.86); }
.section--sombre .surtitre { color: var(--accent); }
.section__interieur { max-width: var(--largeur); margin: 0 auto; }
.section h2 { font-size: clamp(30px, 5.4vw, 52px); margin-bottom: 24px; max-width: 860px; }
.section h3 { font-size: clamp(21px, 3vw, 28px); margin: 36px 0 12px; }
.prose { max-width: var(--prose); }
.prose p, .section > .section__interieur > p { color: var(--text-soft); margin-bottom: 18px; font-size: 16.5px; }
.prose ul { margin: 0 0 20px; }
.prose li { color: var(--text-soft); padding-inline-start: 22px; position: relative; margin-bottom: 8px; }
.prose li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.75em; width: 10px; height: 1px; background: var(--accent-texte); }
.chapo { font-size: 18px; color: var(--text); max-width: var(--prose); margin-bottom: 22px; }
.note { font-size: 13.5px; color: var(--text-soft); max-width: var(--prose); margin-top: 14px; }
.section--sombre .note { color: rgba(250, 250, 248, 0.8); }

@media (min-width: 768px) {
  .section { padding: 96px var(--gouttiere); }
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 28px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 500;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn--principal { background: var(--text); color: var(--bg); }
.btn--principal::after { content: "→"; content: "→" / ""; font-size: 15px; letter-spacing: 0; }
.btn--principal:hover { background: var(--active); color: var(--bg); transform: translateX(3px); }
.btn--secondaire { border-color: var(--text); color: var(--text); background: transparent; }
.btn--secondaire:hover { background: var(--text); color: var(--bg); }

/* ==========================================================================
   CARTES (produits, flotte)
   ========================================================================== */
.cartes { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 36px; }
.carte { border: 1px solid var(--line); background: var(--bg); padding: 30px 24px; display: flex; flex-direction: column; gap: 10px; }
.carte h3 { margin: 0; font-size: 24px; font-weight: 400; }
.carte p { color: var(--text-soft); font-size: 15px; margin: 0; }
.carte .carte__prix { font-family: var(--serif); font-size: 26px; font-weight: 300; color: var(--text); margin-top: auto; padding-top: 12px; }
.carte .carte__prix > span { display: block; }
.carte__prix > span + span { margin-top: 2px; }
.carte__prix > span small { display: inline; font-size: 13px; }
.carte__prix small { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--text-soft); letter-spacing: 0.2px; }
.carte--vedette { border-color: var(--accent); }
.carte__lien { font-size: 14px; display: inline-block; padding: 10px 0; }
.carte--retrait { background: transparent; }
.carte--retrait h3 { font-size: 20px; }
@media (min-width: 720px) { .cartes--2 { grid-template-columns: repeat(2, 1fr); } .cartes--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cartes--3 { grid-template-columns: repeat(3, 1fr); } .carte { padding: 40px 32px; } }

/* ==========================================================================
   L'ESSENTIEL (sous le H1)
   ========================================================================== */
.essentiel {
  max-width: var(--largeur); margin: 24px auto 8px;
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  background: var(--blanc); padding: 24px 20px;
}
.essentiel h2 { font-size: 26px; margin-bottom: 16px; }
.essentiel__liste { display: grid; gap: 14px; margin-bottom: 20px; }
.essentiel__liste div { display: grid; gap: 2px; }
.essentiel__liste dt { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--accent-texte); }
.essentiel__liste dd { font-size: 15.5px; color: var(--text); }
.essentiel__groupe { white-space: nowrap; } /* 19/10/2026 : « véhicule : prix » insécable (audit J-AR : le prix arabe passait seul à la ligne) */
.essentiel__mini { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.essentiel__mini th, .essentiel__mini td { text-align: start; padding-block: 9px; padding-inline: 0 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.essentiel__mini thead th { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--text-soft); }
.essentiel__mini td:last-child { font-family: var(--serif); font-size: 18px; white-space: nowrap; }
.essentiel__date { font-size: 13px; color: var(--text-soft); margin-top: 14px; }
.cadre-essentiel { padding: 0 var(--gouttiere); }
@media (min-width: 768px) {
  .essentiel { padding: 36px 40px; }
  .essentiel__liste { grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
}

/* ==========================================================================
   TABLEAU DE PRIX — défilement horizontal sur téléphone, Classe S en retrait
   ========================================================================== */
.tableau-prix {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0 0;
  border: 1px solid var(--line); background: var(--blanc);
  background-image: linear-gradient(to right, var(--blanc) 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, var(--blanc) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(15, 30, 60, 0.10), rgba(15, 30, 60, 0)), linear-gradient(to left, rgba(15, 30, 60, 0.10), rgba(15, 30, 60, 0));
  background-position: left center, right center, left center, right center;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat; background-attachment: local, local, scroll, scroll;
}
.tableau-prix table { width: 100%; min-width: 600px; border-collapse: collapse; }
.tableau-prix caption { text-align: start; font-family: var(--serif); font-size: 19px; padding: 16px 16px 4px; color: var(--text); }
.tableau-prix th, .tableau-prix td { text-align: start; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tableau-prix tbody tr:last-child th, .tableau-prix tbody tr:last-child td { border-bottom: none; }
.tableau-prix thead th { font-size: 12px; letter-spacing: 1px; font-weight: 600; color: var(--text); background: rgba(15, 30, 60, 0.03); }
.tableau-prix__capacite { display: block; font-weight: 400; font-size: 12px; color: var(--text-soft); letter-spacing: 0; margin-top: 2px; }
.tableau-prix tbody th { font-weight: 400; font-size: 15px; width: 40%; }
.tableau-prix td { font-family: var(--serif); font-size: 20px; font-weight: 300; white-space: nowrap; }
.tableau-prix .tableau-prix__s { color: var(--text-soft); }
.tableau-prix td.tableau-prix__s { font-size: 16px; font-family: var(--sans); font-weight: 400; }
.tableau-prix thead th.tableau-prix__s { font-weight: 500; background: transparent; }
.tableau-prix__note { font-size: 13px; color: var(--text-soft); margin-top: 10px; max-width: var(--prose); }

/* Tableau de comparaison (texte, pas de prix de la grille obligatoire) */
.tableau-simple { overflow-x: auto; border: 1px solid var(--line); background: var(--blanc); margin-top: 20px; }
.tableau-simple table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.tableau-simple th, .tableau-simple td { text-align: start; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tableau-simple thead th { font-size: 12px; letter-spacing: 1px; font-weight: 600; background: rgba(15, 30, 60, 0.03); }
.tableau-simple tbody th { font-weight: 500; }
.tableau-simple td { color: var(--text-soft); }
.tableau-simple tr.ligne-nous th, .tableau-simple tr.ligne-nous td { background: var(--accent-pale); color: var(--text); }

/* ==========================================================================
   INCLUS / PROMESSES / ÉTAPES
   ========================================================================== */
.bloc-inclus { display: grid; gap: 10px; margin: 8px 0 12px; max-width: 860px; }
.bloc-inclus li { position: relative; padding-inline-start: 30px; color: var(--text); font-size: 15.5px; }
.bloc-inclus li::before {
  /* coche dessinée (bords gauche + bas, rotation) : dessin physique voulu, seule sa place est logique */
  content: ""; position: absolute; inset-inline-start: 2px; top: 0.35em; width: 14px; height: 8px;
  border-left: 1.5px solid var(--accent-texte); border-bottom: 1.5px solid var(--accent-texte); transform: rotate(-45deg);
}
.section--sombre .bloc-inclus li { color: var(--bg); }
.section--sombre .bloc-inclus li::before { border-color: var(--accent); }
@media (min-width: 768px) { .bloc-inclus { grid-template-columns: repeat(2, 1fr); gap: 14px 36px; } }

.promesses { display: grid; gap: 2px; margin-top: 32px; }
.promesses__col { border: 1px solid var(--line); padding: 28px 22px; background: var(--bg); }
.promesses__col h3 { margin: 0 0 16px; font-size: 22px; font-weight: 400; }
.promesses__col li { padding-block: 10px; padding-inline: 28px 0; border-top: 1px solid var(--line); position: relative; color: var(--text-soft); font-size: 15px; }
.promesses__col li strong { color: var(--text); font-weight: 500; }
.promesses__col--oui li::before { content: "✓"; content: "✓" / ""; position: absolute; inset-inline-start: 2px; top: 10px; color: var(--accent-texte); }
.promesses__col--non li::before { content: "×"; content: "×" / ""; position: absolute; inset-inline-start: 3px; top: 8px; color: var(--accent-texte); font-size: 18px; }
@media (min-width: 860px) { .promesses { grid-template-columns: 1fr 1fr; } .promesses__col { padding: 40px 36px; } }

.etapes { display: grid; gap: 2px; counter-reset: etape; margin-top: 32px; }
.etapes li { counter-increment: etape; border: 1px solid var(--line); padding: 26px 22px; background: var(--bg); }
.etapes li::before { content: "0" counter(etape); content: "0" counter(etape) / ""; display: block; font-family: var(--serif); font-size: 40px; font-weight: 200; color: var(--accent-texte); line-height: 1; margin-bottom: 14px; }
.etapes h3 { margin: 0 0 8px; font-size: 21px; font-weight: 400; }
.etapes p { color: var(--text-soft); font-size: 15px; }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(3, 1fr); } .etapes--4 { grid-template-columns: repeat(4, 1fr); } .etapes li { padding: 36px 30px; } }

.terminaux { display: grid; gap: 2px; margin-top: 28px; }
.terminal { border: 1px solid var(--line); padding: 24px 22px; background: var(--blanc); }
.terminal h3 { margin: 0 0 6px; font-size: 22px; font-weight: 400; }
.terminal__futur { font-size: 13px; color: var(--accent-texte); font-weight: 500; margin-bottom: 10px; }
.terminal p { color: var(--text-soft); font-size: 15px; }
@media (min-width: 860px) { .terminaux { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   FAQ (details / summary natifs : lisibles sans JavaScript)
   ========================================================================== */
.faq__liste { max-width: 820px; margin-top: 12px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding-block: 20px; padding-inline: 0 44px; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.35; color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; content: "+" / ""; position: absolute; inset-inline-end: 4px; top: 18px; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 16px; color: var(--accent-texte);
  transition: transform 0.3s;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__suite { max-width: 820px; margin-top: 28px; }
.faq__suite h3 { font-size: 20px; margin: 0 0 8px; }
.faq__suite li { padding: 2px 0; }
.faq__suite a { display: inline-block; padding: 8px 0; }
.faq__item p { padding: 0 0 22px; color: var(--text-soft); font-size: 15.5px; max-width: 720px; }

/* ==========================================================================
   FIL D'ARIANE
   ========================================================================== */
.fil-ariane { max-width: var(--largeur); margin: 0 auto; }
.tete-page .fil-ariane { margin-bottom: 22px; }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--text-soft); }
.fil-ariane li + li::before { content: "›"; content: "›" / ""; margin-inline-end: 8px; color: var(--accent-texte); }
.fil-ariane a { color: var(--text-soft); display: inline-block; padding: 6px 0; }
.fil-ariane a:hover { color: var(--text); }

/* ==========================================================================
   APPEL À L'ACTION
   ========================================================================== */
.cta { padding: 72px var(--gouttiere); text-align: center; border-top: 1px solid var(--line); }
.cta__interieur { max-width: 760px; margin: 0 auto; }
.cta__titre { font-size: clamp(30px, 5vw, 50px); margin-bottom: 16px; }
.cta p { color: var(--text-soft); margin: 0 auto 30px; max-width: 560px; }
.cta .boutons { justify-content: center; }
@media (min-width: 768px) { .cta { padding: 112px var(--gouttiere); } }

/* ==========================================================================
   FORMULAIRE « DEMANDER UN PRIX »
   ========================================================================== */
.formulaire { max-width: 760px; background: var(--blanc); border: 1px solid var(--line); padding: 26px 20px; margin-top: 8px; }
.formulaire fieldset { border: none; margin: 0 0 26px; padding: 0; min-width: 0; }
.formulaire legend { font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 14px; padding: 0; }
.champs { display: grid; gap: 18px; }
.champs--espace { margin-top: 18px; }
@media (min-width: 640px) { .champs--2 { grid-template-columns: 1fr 1fr; } .champs--3 { grid-template-columns: repeat(3, 1fr); } .formulaire { padding: 40px 40px; } }
.champ > label:not(.case) { display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.champ .aide { display: block; font-size: 13px; color: var(--text-soft); margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 46px; padding: 11px 12px; font-family: var(--sans); font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid #8F8A7E; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.champ select { background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--active); outline: 2px solid var(--accent); outline-offset: 0; }
.champ [aria-invalid="true"] { border-color: #A3322B; }
.champ__erreur { display: block; font-size: 13px; color: #A3322B; margin-top: 4px; min-height: 0; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-soft); margin-bottom: 0; }
/* La case garde son apparence native (cochée / non cochée visible) : elle échappe à la règle des champs ci-dessus. */
.champ .case input { -webkit-appearance: auto; appearance: auto; width: 22px; height: 22px; min-height: 0; padding: 0; margin-top: 1px; flex-shrink: 0; accent-color: var(--active); border: none; background: none; }
/* Champ piège (honeypot) : hors écran, sans casser la largeur de la page (leçon : jamais de débordement à 375 px) */
.champ-piege { position: absolute !important; inset-inline-start: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.formulaire__envoi { margin-top: 8px; }
.formulaire__message { margin-top: 20px; padding: 16px 18px; border-inline-start: 3px solid var(--accent-texte); background: var(--accent-pale); font-size: 15px; }
.formulaire__message[hidden] { display: none; }
.formulaire__message--erreur { border-inline-start-color: #A3322B; background: #FBF1EF; }
.obligatoire { color: #A3322B; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.pied { background: var(--text); color: var(--bg); padding: 56px var(--gouttiere) 0; }
/* Liens du pied : ligne ≥ 24 px + 6 px de marge haute et basse = cible d'environ 34 px (audit global du 18/10, M-3) */
.pied a { color: rgba(250, 250, 248, 0.86); text-decoration: none; display: inline-block; padding: 6px 0; line-height: 24px; }
.pied a:hover { color: var(--bg); text-decoration: underline; }
.pied__haut, .pied__colonnes, .pied__bas { max-width: 1280px; margin: 0 auto; }
.pied__haut { padding-bottom: 28px; border-bottom: 1px solid rgba(250, 250, 248, 0.14); margin-bottom: 36px; }
.pied__logo { font-family: var(--serif); font-size: 22px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 8px; }
.pied__baseline { font-size: 14px; color: rgba(250, 250, 248, 0.8); }
.pied__colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-bottom: 44px; }
.pied__titre { font-family: var(--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.pied__col ul { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: rgba(250, 250, 248, 0.86); }
.pied__langues-titre { margin-top: 14px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.pied__langue a[aria-current] { color: var(--bg); text-decoration: underline; text-underline-offset: 4px; }
.pied__bas { border-top: 1px solid rgba(250, 250, 248, 0.14); padding: 20px 0 28px; display: flex; flex-direction: column; gap: 14px; }
.pied__legal { font-size: 12.5px; color: rgba(250, 250, 248, 0.78); line-height: 1.6; }
.pied__liens-legaux { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 12.5px; }
@media (min-width: 860px) {
  .pied { padding: 72px 64px 0; }
  .pied__colonnes { grid-template-columns: repeat(3, 1fr); }
  .pied__bas { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px; }
}

/* ==========================================================================
   BOUTON WHATSAPP FLOTTANT (secondaire, affiché seulement quand site.whatsapp existe)
   ========================================================================== */
.whatsapp-btn {
  position: fixed; bottom: calc(20px + var(--cookies-h, 0px)); inset-inline-end: 20px; z-index: 150; width: 52px; height: 52px; border-radius: 50%;
  background: #128C7E; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(18, 140, 126, 0.35);
}
.whatsapp-btn svg { width: 26px; height: 26px; }

/* ==========================================================================
   PAGES SIMPLES (légal en préparation, 404)
   ========================================================================== */
.page-simple { padding: 56px var(--gouttiere) 88px; }
.page-simple__interieur { max-width: var(--prose); margin: 0 auto; }
.page-simple h1 { font-size: clamp(34px, 6vw, 56px); margin-bottom: 20px; }
.page-simple h2 { font-size: 24px; font-weight: 400; margin: 32px 0 12px; }
.page-simple h3 { font-size: 19px; font-weight: 500; margin: 24px 0 8px; }
.page-simple p { color: var(--text-soft); margin-bottom: 16px; }
.page-simple dl { margin: 24px 0; display: grid; gap: 8px; font-size: 15px; }
.page-simple dt { font-weight: 600; }
.page-simple dd { color: var(--text-soft); margin-bottom: 8px; }
.page-simple .liens-utiles { margin-top: 24px; display: grid; gap: 8px; }
.page-simple hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

/* ==========================================================================
   BANDEAU COOKIES (phase 4) — affiché seulement si site.json → ga4 est renseigné
   Mobile d'abord : pleine largeur en bas ; deux boutons de MÊME poids (même classe, même taille,
   même couleur). Contrastes : crème sur bleu nuit 15,8:1 (texte, liseré des boutons) ; focus visible
   (anneau bleu poudré 6,5:1 sur le fond du bandeau).
   ========================================================================== */
.cookies {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 200;
  background: var(--text); color: var(--bg);
  padding: 16px var(--gouttiere) calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 24px rgba(15, 30, 60, 0.18);
  display: grid; gap: 14px;
}
.cookies[hidden] { display: none; }
.cookies__texte { font-size: 14px; line-height: 1.5; max-width: 760px; }
.cookies__texte a { color: var(--bg); text-decoration: underline; }
.cookies__texte a:hover { color: var(--accent); }
.cookies__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookies__bouton {
  min-height: 48px; padding: 12px 18px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 500;
  background: transparent; color: var(--bg); border: 1px solid var(--bg); cursor: pointer;
}
.cookies__bouton:hover { background: var(--bg); color: var(--text); }
.cookies :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cookies-choix {
  font: inherit; font-size: inherit; color: var(--active); background: none; border: none; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cookies-choix:hover { color: var(--text); }
.pied .cookies-choix { color: rgba(250, 250, 248, 0.86); text-decoration: none; font-size: 14px; display: inline-block; padding: 6px 0; line-height: 24px; }
.pied .cookies-choix:hover { color: var(--bg); text-decoration: underline; }
@media (min-width: 760px) {
  .cookies { grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding-inline: 32px; }
  .cookies__boutons { grid-template-columns: repeat(2, minmax(150px, auto)); }
}

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

/* Très petits écrans : l'essentiel et son mini-tableau tiennent à 320 px (placé en fin de feuille pour primer) */
@media (max-width: 419px) {
  .essentiel { padding: 20px 14px; }
  .essentiel__mini { font-size: 13.5px; }
  .essentiel__mini thead th { letter-spacing: 0.4px; font-size: 10.5px; }
  .essentiel__mini th, .essentiel__mini td { padding-inline-end: 6px; }
  .essentiel__mini td:last-child { font-size: 16px; }
}

/* ==========================================================================
   DROITE À GAUCHE (arabe, <html dir="rtl">) et TYPOGRAPHIE ARABE (gabarit à quatre langues, 19/10/2026)
   Le reste de la feuille est en propriétés logiques : ici, seulement ce qui ne se retourne pas tout seul.
   ========================================================================== */
[dir="rtl"] .btn--principal::after { content: "←"; content: "←" / ""; }
[dir="rtl"] .btn--principal:hover { transform: translateX(-3px); }
[dir="rtl"] .fil-ariane li + li::before { content: "‹"; content: "‹" / ""; }
[dir="rtl"] .heros::after { background: linear-gradient(270deg, rgba(127, 167, 196, 0.6), rgba(127, 167, 196, 0)); }
[dir="rtl"] .champ select { background-position: 13px 50%, 18px 50%; }
/* Montants : toujours lus de gauche à droite (« 105 € »), même au milieu d'une phrase arabe. Le filtre prix(lang) les
   isole déjà (LRI … PDI) ; la règle couvre aussi les champs de saisie de chiffres, d'e-mail et de téléphone. */
[dir="rtl"] [data-prix], [dir="rtl"] .tableau-prix td, [dir="rtl"] .carte__prix > span { unicode-bidi: isolate; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="date"], [dir="rtl"] input[type="time"] { direction: ltr; text-align: end; }
[dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"] { unicode-bidi: isolate; direction: ltr; }

/* Arabe : police Noto Naskh Arabic (chargée par base.njk sur les seules pages arabes), corps plus grand, interlignage plus
   ouvert (hampes et points diacritiques), jamais d'espacement de lettres (il casse la liaison des lettres arabes), pas
   d'italique. Le nom « Precelya » (logo) garde Fraunces et son espacement. */
html[lang="ar"] {
  --serif: 'Noto Naskh Arabic', 'Fraunces', Georgia, serif;
  --sans: 'Noto Naskh Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}
html[lang="ar"] body { font-size: 17.5px; line-height: 1.85; }
html[lang="ar"] body *:not(.entete__logo):not(.pied__logo) { letter-spacing: 0 !important; }
html[lang="ar"] .entete__logo, html[lang="ar"] .pied__logo { font-family: 'Fraunces', Georgia, serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-weight: 500; line-height: 1.45; }
html[lang="ar"] .heros h1, html[lang="ar"] .tete-page h1 { line-height: 1.35; }
html[lang="ar"] em, html[lang="ar"] h1 em, html[lang="ar"] h2 em { font-style: normal; font-weight: 600; }
html[lang="ar"] .prose p, html[lang="ar"] .section > .section__interieur > p { font-size: 18px; }
html[lang="ar"] .faq__item p, html[lang="ar"] .essentiel__liste dd, html[lang="ar"] .bloc-inclus li, html[lang="ar"] .promesses__col li,
html[lang="ar"] .carte p, html[lang="ar"] .etapes p, html[lang="ar"] .terminal p, html[lang="ar"] .tableau-prix tbody th { font-size: 17px; }
html[lang="ar"] .faq__item summary { font-size: 20px; line-height: 1.55; }
html[lang="ar"] .surtitre, html[lang="ar"] .essentiel__liste dt, html[lang="ar"] .pied__titre, html[lang="ar"] .champ > label:not(.case),
html[lang="ar"] .essentiel__mini thead th, html[lang="ar"] .menu-mobile__langues-titre, html[lang="ar"] .pied__langues-titre { font-size: 14px; }
html[lang="ar"] .btn, html[lang="ar"] .entete__cta, html[lang="ar"] .cookies__bouton { font-size: 15px; }
html[lang="ar"] .bandeau-prix p, html[lang="ar"] .bandeau-langue p, html[lang="ar"] .tableau-prix__note, html[lang="ar"] .essentiel__date,
html[lang="ar"] .note, html[lang="ar"] .fil-ariane ol { font-size: 14.5px; }
html[lang="ar"] .menu-mobile a { font-size: 28px; line-height: 1.5; }
html[lang="ar"] .menu-mobile .menu-mobile__langues a { font-size: 18px; }
html[lang="ar"] .entete__menu a { font-size: 15.5px; }

/* Arabe : menu mobile plus compact (13 liens ne tenaient pas dans 812 px ; audit F-AR, D-1) */
html[lang="ar"] .menu-mobile a { font-size: 26px; line-height: 1.4; padding-block: 4px; }