/* Quentin Challier, assistance informatique à domicile (challierq.fr)
   Feuille de styles unique, écrite pour le mobile d'abord.
   Points de rupture : 560px (numéro visible dans l'en-tête), 720px (grilles à deux colonnes, barre d'appel masquée), 1000px (en-tête sur une ligne, hero et cartes en colonnes).
   Aucune dépendance : pas de Tailwind, pas de JavaScript. */

/* ---------- Polices hébergées sur le serveur (licence OFL, voir /fonts) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  /* Couleurs */
  --marine: #07203E;          /* texte, boutons, fonds sombres (couleur du logo) */
  --marine-fonce: #051729;    /* pied de page */
  --cyan: #06ECF9;            /* accent du logo : icônes sur fond marine, bouton d'appel sur fond marine */
  --bleu: #0B4A8A;            /* petits titres en capitales, coches, survol des liens */
  --texte: #07203E;
  --texte-2: #1D3552;         /* paragraphes */
  --texte-3: #34485F;         /* descriptions, légendes */
  --fond: #FFFFFF;
  --fond-teinte: #EEF5FB;
  --bordure: #C6D5E3;
  --bordure-champ: #5A6F87;
  --sur-marine: #CFE3F5;      /* texte secondaire sur fond marine */
  --filet-marine: #2F4A6B;
  --etoile: #E8A100;
  --a-completer-fond: #FFF1CC;
  --a-completer-texte: #5C3D00;

  /* Typographie */
  --police-texte: "Atkinson Hyperlegible", Verdana, sans-serif;
  --police-titre: "Poppins", "Trebuchet MS", sans-serif;

  /* Formes */
  --rayon-s: 12px;
  --rayon-m: 16px;
  --rayon-l: 22px;
  --rayon-xl: 26px;
  --largeur: 1240px;
  --gouttiere: 20px;
  --bloc: 56px;               /* marge verticale des sections */

  /* Icônes (masques SVG, colorées par background-color) */
  --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --ico-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  --ico-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-prix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E");
  --ico-devis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
  --ico-bulle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --ico-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
  --ico-etoile-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
  --ico-outil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
  --ico-ecran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
  --ico-livre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  --ico-courriel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

@media (min-width: 720px) {
  :root { --gouttiere: 32px; --bloc: 72px; }
}
@media (min-width: 1000px) {
  :root { --gouttiere: 40px; --bloc: 88px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 19px;
  line-height: 1.55;
}
@media (min-width: 720px) { body { font-size: 20px; } }

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

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; }
h3 { font-size: clamp(22px, 2.4vw, 26px); line-height: 1.2; }

p { color: var(--texte-2); text-wrap: pretty; }

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

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

section[id], div[id] { scroll-margin-top: 96px; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--bloc); }
.section--teinte { background: var(--fond-teinte); }
.section--marine { background: var(--marine); color: #FFFFFF; }
.section--marine p { color: var(--sur-marine); }
.section--marine .carte p { color: var(--texte-3); }

.pile { display: flex; flex-direction: column; gap: 20px; }
.pile--large { gap: 36px; }
.pile--moyen { gap: 26px; }
.pile--serre { gap: 12px; }
.chapo { font-size: 21px; line-height: 1.5; max-width: 640px; }
@media (min-width: 720px) { .chapo { font-size: 22px; } }
.petit { font-size: 17px; color: var(--texte-3); }
@media (min-width: 720px) { .petit { font-size: 18px; } }
.mesure { max-width: 820px; }
.insecable { white-space: nowrap; }
.mesure-courte { max-width: 640px; }

.visuellement-masque {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 12px 18px; border-radius: var(--rayon-s);
  background: var(--marine); color: #FFFFFF; font-weight: 700;
}
.evitement:focus { top: 12px; color: #FFFFFF; }

/* Zone à compléter avant mise en ligne (ne doit plus apparaître en production) */
.a-completer {
  background: var(--a-completer-fond); color: var(--a-completer-texte);
  padding: 2px 8px; border-radius: 6px; font-weight: 700;
}

/* ---------- Icônes ---------- */
.ico {
  flex: none; display: inline-block; width: 1.2em; height: 1.2em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ico--tel { --ico: var(--ico-tel); }
.ico--chevron { --ico: var(--ico-chevron); }
.ico--lieu { --ico: var(--ico-lieu); }
.ico--prix { --ico: var(--ico-prix); }
.ico--devis { --ico: var(--ico-devis); }
.ico--bulle { --ico: var(--ico-bulle); }
.ico--etoile { --ico: var(--ico-etoile-trait); }
.ico--outil { --ico: var(--ico-outil); }
.ico--ecran { --ico: var(--ico-ecran); }
.ico--livre { --ico: var(--ico-livre); }
.ico--courriel { --ico: var(--ico-courriel); }
.ico--cyan { background-color: var(--cyan); }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 8px 24px;
  border: 2px solid var(--marine); border-radius: var(--rayon-m);
  background: var(--marine); color: #FFFFFF;
  font-family: var(--police-texte); font-weight: 700; font-size: 20px; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: #0B2F58; border-color: #0B2F58; color: #FFFFFF; }
.btn--contour { background: #FFFFFF; color: var(--marine); }
.btn--contour:hover { background: var(--fond-teinte); border-color: var(--marine); color: var(--marine); }
.btn--cyan { background: var(--cyan); border-color: var(--cyan); color: var(--marine); }
.btn--cyan:hover { background: #7DF5FC; border-color: #7DF5FC; color: var(--marine); }
.btn--numero { font-family: var(--police-titre); white-space: nowrap; }
.btn--large { width: 100%; }

/* Bouton d'appel sur deux lignes : « Appeler Quentin » puis le numéro */
.btn-appel {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 72px; padding: 8px 24px 8px 20px;
  border-radius: 18px; background: var(--marine); color: #FFFFFF; text-decoration: none;
}
.btn-appel:hover { background: #0B2F58; color: #FFFFFF; }
.btn-appel .ico { width: 32px; height: 32px; background-color: var(--cyan); }
.btn-appel__texte { display: flex; flex-direction: column; line-height: 1.2; }
.btn-appel__libelle { font-size: 16px; color: var(--sur-marine); }
.btn-appel__numero { font-family: var(--police-titre); font-weight: 700; font-size: 25px; white-space: nowrap; }
.btn-appel--geant { min-height: 92px; border-radius: 20px; padding: 12px 28px 12px 24px; }
.btn-appel--geant .ico { width: 40px; height: 40px; }
.btn-appel--geant .btn-appel__libelle { font-size: 18px; }
.btn-appel--geant .btn-appel__numero { font-size: clamp(28px, 7.4vw, 40px); }
@media (min-width: 720px) {
  .btn-appel { min-height: 76px; padding: 10px 28px 10px 22px; }
  .btn-appel__libelle { font-size: 17px; }
  .btn-appel__numero { font-size: 28px; }
}

.btn-voir {
  min-height: 60px; border-radius: 18px; font-size: 20px;
}
@media (min-width: 720px) { .btn-voir { min-height: 76px; padding-inline: 28px; font-size: 22px; } }

.actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) { .actions { flex-direction: row; flex-wrap: wrap; gap: 16px; } }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 700; color: var(--marine);
}
.lien-fleche .ico { width: 20px; height: 20px; }

/* ---------- En-tête ---------- */
.entete { background: var(--fond); border-bottom: 1px solid var(--bordure); }
.entete__barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding-block: 12px 6px;
}
.marque { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: var(--texte); }
.marque:hover { color: var(--texte); }
.marque img { height: 40px; width: auto; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.2; }
.marque__nom { font-family: var(--police-titre); font-weight: 700; font-size: 18px; }
.marque__metier { font-size: 15px; color: var(--texte-3); }

.menu {
  order: 3; flex: 1 0 100%;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px;
  margin-inline: -6px; padding-top: 6px; border-top: 1px solid var(--bordure);
}
.menu a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px;
  border-radius: 10px; font-size: clamp(15px, 4.1vw, 17px); font-weight: 700;
  text-decoration: none; color: var(--texte); white-space: nowrap;
}
.menu a:hover { background: var(--fond-teinte); color: var(--texte); }
.menu a[aria-current="page"] { background: var(--fond-teinte); box-shadow: inset 0 -3px 0 var(--marine); }

.entete__tel {
  min-height: 52px; min-width: 52px; padding: 0 14px; border-radius: 14px;
  font-family: var(--police-titre); font-size: 20px; white-space: nowrap;
}
.entete__tel .ico { width: 24px; height: 24px; background-color: var(--cyan); }
.entete__numero { display: none; }

@media (min-width: 560px) {
  .entete__numero { display: inline; }
  .entete__tel { padding: 0 22px; }
  .menu { justify-content: flex-start; gap: 4px; }
  .menu a { padding: 0 12px; }
}
@media (min-width: 1000px) {
  .entete { position: sticky; top: 0; z-index: 20; }
  .entete__barre { flex-wrap: nowrap; padding-block: 14px; }
  .marque { gap: 14px; }
  .marque img { height: 48px; }
  .marque__nom { font-size: 20px; }
  .marque__metier { font-size: 16px; }
  .menu { order: 0; flex: 0 1 auto; margin: 0; padding: 0; border: 0; }
  .menu a { font-size: 18px; }
  .entete__tel { min-height: 56px; }
}
/* Entre 1000 et 1199 px, le menu à cinq liens ne laisse pas la place au numéro : le bouton d'appel garde l'icône seule. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .entete__numero { display: none; }
  .entete__tel { padding: 0 14px; }
  .menu a { padding: 0 8px; }
}

/* ---------- Fil d'Ariane ---------- */
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 17px; color: var(--texte-3); }
.fil-ariane li { display: inline-flex; align-items: center; gap: 8px; }
.fil-ariane li + li::before {
  content: ""; width: 16px; height: 16px; background: var(--texte-3);
  -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat;
}
.fil-ariane a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Hero ---------- */
.hero { background: var(--fond-teinte); }
.hero__grille {
  display: flex; flex-direction: column; gap: 32px;
  padding-block: 28px 40px;
}
.hero__texte { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero--page .hero__grille { padding-block: 16px 40px; }
.hero--page .hero__texte { gap: 16px; }
.hero--page h1 { font-size: clamp(30px, 3.9vw, 48px); line-height: 1.12; }

.surtitre {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--police-texte); font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: 0;
}
.surtitre .ico { width: 20px; height: 20px; }
@media (min-width: 720px) { .surtitre { font-size: 19px; margin-bottom: 20px; } .surtitre .ico { width: 22px; height: 22px; } }

.hero br.large { display: none; }

@media (min-width: 720px) {
  .hero__grille { padding-block: 48px 64px; }
  .hero__texte { gap: 24px; }
  .hero--page .hero__grille { padding-block: 32px 60px; }
  .hero--page .hero__texte { gap: 20px; }
}
@media (min-width: 1000px) {
  .hero__grille { flex-direction: row; align-items: center; gap: 64px; padding-block: 72px 84px; }
  .hero__texte { flex: 1 1 520px; }
  .hero--page .hero__grille { padding-block: 48px 72px; }
  .hero--contact .hero__grille { align-items: flex-start; }
  .hero br.large { display: inline; }
}

/* Portrait avec bloc marine décalé et étiquette */
.portrait { position: relative; padding: 0 16px 16px 0; max-width: 280px; width: 100%; align-self: center; }
.portrait::before {
  content: ""; position: absolute; top: 28px; left: 28px; right: 0; bottom: 0;
  background: var(--marine); border-radius: 24px;
}
.portrait img { position: relative; width: 100%; aspect-ratio: 320 / 353; object-fit: cover; border-radius: 24px; }
.portrait figcaption {
  position: relative; margin: -46px 18px 0; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  background: #FFFFFF; border-radius: var(--rayon-m); box-shadow: 0 8px 24px rgba(7, 32, 62, 0.2);
  line-height: 1.3;
}
.portrait figcaption::before {
  content: ""; flex: none; width: 0; height: 0;
  border-block: 12px solid transparent; border-left: 16px solid var(--cyan);
}
.portrait__nom { display: block; font-weight: 700; font-size: 20px; }
.portrait__detail { display: block; font-size: 17px; color: var(--texte-3); }
@media (min-width: 720px) { .portrait { max-width: 330px; } }
@media (min-width: 1000px) { .portrait { flex: 0 1 330px; padding: 0 18px 18px 0; } }

/* ---------- Bandeau de réassurance ---------- */
.bandeau { border-bottom: 1px solid var(--bordure); }
.bandeau ul { display: grid; grid-template-columns: 1fr; gap: 16px 28px; padding-block: 24px; }
.bandeau li { display: flex; align-items: center; gap: 14px; line-height: 1.3; }
.bandeau .ico { width: 30px; height: 30px; }
.bandeau strong { display: block; }
.bandeau span.detail { display: block; font-size: 17px; color: var(--texte-3); }
@media (min-width: 560px) { .bandeau ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bandeau ul { grid-template-columns: repeat(4, 1fr); padding-block: 28px; } .bandeau span.detail { font-size: 18px; } }

/* ---------- Cartes ---------- */
.carte {
  background: #FFFFFF; border: 2px solid var(--bordure); border-radius: var(--rayon-xl);
  padding: 24px;
}
@media (min-width: 720px) { .carte { padding: 32px; } }
@media (min-width: 1000px) { .carte--ample { padding: 40px; } }
.carte--teinte { background: var(--fond-teinte); border-color: transparent; }

.grille-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1000px) { .grille-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.grille-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .grille-2 { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* Carte « besoin » de l'accueil */
.besoin { display: flex; flex-direction: column; gap: 14px; border-radius: var(--rayon-l); }
.besoin__icone {
  width: 60px; height: 60px; border-radius: var(--rayon-m); background: var(--fond-teinte);
  display: flex; align-items: center; justify-content: center;
}
.besoin__icone .ico { width: 30px; height: 30px; }
.besoin p { flex-grow: 1; }
.besoin__prix { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.besoin__prix .montant { font-family: var(--police-titre); font-size: 28px; line-height: 1.1; }

/* Carte lien (bas des pages prestation et locales) */
.carte-lien {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; border-radius: var(--rayon-l); text-decoration: none; color: var(--texte);
}
.carte-lien:hover { border-color: var(--marine); color: var(--texte); }
.carte-lien strong { display: block; font-family: var(--police-titre); font-size: 22px; line-height: 1.25; }
.carte-lien span.detail { display: block; margin-top: 4px; color: var(--texte-3); }
.carte-lien .ico { width: 28px; height: 28px; }
@media (min-width: 720px) { .carte-lien { padding: 24px 28px; } .carte-lien strong { font-size: 24px; } }

/* ---------- Listes à coches et pastilles ---------- */
.coches { display: flex; flex-direction: column; gap: 12px; }
.coches li { position: relative; padding-left: 36px; }
.coches li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 24px; height: 24px;
  background: var(--couleur-coche, var(--bleu));
  -webkit-mask: var(--ico-coche) center / contain no-repeat; mask: var(--ico-coche) center / contain no-repeat;
}
.coches--compact { font-size: 17px; gap: 10px; }
@media (min-width: 720px) { .coches--compact { font-size: 19px; gap: 12px; } }
.coches--ligne { display: grid; grid-template-columns: 1fr; gap: 12px 28px; }
@media (min-width: 720px) { .coches--ligne { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .coches--ligne { grid-template-columns: repeat(4, 1fr); } }

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastilles li {
  display: inline-flex; align-items: center; min-height: 48px; padding: 6px 18px;
  border-radius: 999px; background: var(--fond-teinte); border: 2px solid var(--bordure);
  font-weight: 700; line-height: 1.3;
}
.section--teinte .pastilles li { background: #FFFFFF; }
.pastilles li.pastille--forte { background: var(--marine); border-color: var(--marine); color: #FFFFFF; }
.pastilles li.pastille--devis { background: #FFFFFF; border-style: dashed; border-color: var(--bordure-champ); }
.pastilles a {
  display: inline-flex; align-items: center; min-height: 48px;
  margin: -6px -18px; padding: 6px 18px; border-radius: 999px; text-decoration: none;
}
.pastilles li:hover:has(a) { border-color: var(--marine); }
@media (min-width: 720px) { .pastilles { gap: 12px; } .pastilles li { min-height: 52px; padding-inline: 20px; } .pastilles a { min-height: 52px; margin-inline: -20px; padding-inline: 20px; } }

/* ---------- Tarifs ---------- */
.etiquette {
  font-family: var(--police-texte); font-weight: 700; font-size: 17px; line-height: 1.55;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu);
}
@media (min-width: 720px) { .etiquette { font-size: 19px; } }

/* Carte marine du tarif de base */
.tarif-base {
  background: var(--marine); color: #FFFFFF; border-radius: var(--rayon-xl);
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
  --couleur-coche: var(--cyan);
}
.tarif-base .etiquette { color: var(--cyan); }
.tarif-base__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.tarif-base__montant { font-family: var(--police-titre); font-weight: 700; font-size: 76px; line-height: 1; white-space: nowrap; }
.tarif-base__unite { font-size: 22px; font-weight: 700; }
.tarif-base hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--filet-marine); }
.tarif-base p { color: var(--sur-marine); font-size: 17px; }
.tarif-base p.tarif-base__prix { color: inherit; font-size: inherit; }
.tarif-base p.tarif-base__intro { color: #FFFFFF; font-size: inherit; font-weight: 700; }
@media (min-width: 720px) {
  .tarif-base { padding: 32px; gap: 22px; }
  .tarif-base__montant { font-size: clamp(72px, 9vw, 104px); }
  .tarif-base__unite { font-size: 26px; }
  .tarif-base p { font-size: 18px; }
  .tarif-base .coches { gap: 14px; }
}
@media (min-width: 1000px) { .tarif-base { padding: 40px; } }

/* Variante claire, dans le hero des pages intérieures */
.tarif-base--clair {
  background: #FFFFFF; color: var(--texte); border: 2px solid var(--bordure);
  --couleur-coche: var(--bleu);
}
.tarif-base--clair .etiquette { color: var(--bleu); }
.tarif-base--clair hr { background: var(--bordure); }
.tarif-base--clair .tarif-base__montant { font-size: 72px; }
.tarif-base--clair .tarif-base__unite { font-size: 22px; }
@media (min-width: 1000px) { .tarif-base--clair { flex: 0 1 380px; padding: 32px; gap: 16px; } }

/* Liste de prix : un intitulé, une description, un prix à droite */
.prix-liste { display: flex; flex-direction: column; }
.prix-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--bordure);
}
.prix-liste__texte { min-width: 0; }
.prix-liste__titre { display: block; font-weight: 700; font-size: 19px; line-height: 1.35; }
.prix-liste__detail { display: block; font-size: 16px; color: var(--texte-3); }
.prix-liste__prix { font-family: var(--police-titre); font-weight: 700; font-size: 28px; line-height: 1; white-space: nowrap; }
.prix-liste__prix small { font-family: var(--police-texte); font-weight: 400; font-size: 16px; color: var(--texte-3); margin-right: 6px; }
.prix-liste__prix--texte { font-family: var(--police-texte); font-size: 19px; }
@media (min-width: 720px) {
  .prix-liste li { gap: 24px; padding: 20px 0; }
  .prix-liste__titre { font-size: 22px; line-height: 1.3; }
  .prix-liste__detail { font-size: 18px; }
  .prix-liste__prix { font-size: 36px; }
  .prix-liste__prix small { font-size: 18px; margin-right: 8px; }
  .prix-liste__prix--texte { font-size: 22px; }
}
.prix-groupe { margin-top: 10px; padding: 14px 0 4px; border-top: 3px solid var(--marine); }
.prix-groupe + .prix-liste li:first-child { border-top: 0; }
.carte-prix { display: flex; flex-direction: column; }
.carte-prix > p { margin: 4px 0 14px; color: var(--texte-3); }
.carte-prix__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; min-height: 56px; padding-bottom: 16px; }
.carte-prix__tete p { margin: 0; color: inherit; line-height: 1; }
.carte-prix__tete .montant { font-family: var(--police-titre); font-weight: 700; font-size: 40px; line-height: 1; white-space: nowrap; }
.carte-prix__tete .unite { font-weight: 700; margin-left: 8px; }

/* Mise en page de la section tarifs (accueil et page tarifs) */
.tarifs-colonnes { display: flex; flex-direction: column; gap: 20px; }
.tarifs-colonnes__gauche { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tarifs-colonnes__gauche > .carte { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.tarifs-colonnes__gauche > .carte .btn { align-self: flex-start; }
@media (min-width: 1000px) {
  .tarifs-colonnes { flex-direction: row; align-items: stretch; gap: 28px; }
  .tarifs-colonnes__gauche { flex: 1 1 380px; gap: 28px; }
  .tarifs-colonnes__droite { flex: 1.35 1 480px; min-width: 0; }
}
.titre-moyen { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; }
.titre-carte { font-size: 22px; line-height: 1.25; }
@media (min-width: 720px) { .titre-carte { font-size: 24px; } }

.note-tarifs { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 720px) { .note-tarifs { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px 40px; } .note-tarifs p { flex: 1 1 520px; max-width: 820px; } }

/* ---------- Étapes ---------- */
.etapes { display: grid; grid-template-columns: 1fr; gap: 28px; counter-reset: etape; }
.etapes li { display: flex; flex-direction: column; gap: 12px; counter-increment: etape; }
.etapes li::before {
  content: counter(etape); width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--marine); color: #FFFFFF; font-family: var(--police-titre); font-weight: 700; font-size: 28px;
}
@media (min-width: 720px) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
  .etapes li { gap: 14px; }
  .etapes li::before { width: 68px; height: 68px; font-size: 32px; }
}

/* ---------- Deux colonnes texte ---------- */
.duo { display: flex; flex-direction: column; gap: 32px; }
.duo > * { min-width: 0; }
@media (min-width: 1000px) {
  .duo { flex-direction: row; align-items: center; gap: 64px; }
  .duo > * { flex: 1 1 0; }
  .duo--haut { align-items: flex-start; }
  .duo--texte > :first-child { flex: 1.5 1 0; }
  .duo--texte > :last-child { flex: 1 1 0; }
}

/* ---------- Module avis Google ---------- */
.avis { display: flex; flex-direction: column; gap: 18px; }
.avis__note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.avis__chiffre { font-family: var(--police-titre); font-weight: 700; font-size: 56px; line-height: 1; }
.avis__detail { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.etoiles { display: flex; gap: 4px; }
.etoiles span {
  width: 26px; height: 26px; background: var(--etoile);
  -webkit-mask: var(--ico-etoile) center / contain no-repeat; mask: var(--ico-etoile) center / contain no-repeat;
}
.etoiles--petites span { width: 18px; height: 18px; }
.avis__carte { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--bordure); border-radius: 14px; }
.avis__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.avis__liens .btn { min-height: 52px; padding: 6px 20px; border-radius: 14px; font-size: inherit; }
@media (min-width: 720px) { .avis__chiffre { font-size: 64px; } .etoiles span { width: 28px; height: 28px; } .etoiles--petites span { width: 18px; height: 18px; } }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--bordure); }
.faq details { border-top: 1px solid var(--bordure); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--police-texte); font-weight: 700; font-size: 20px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 26px; height: 26px; background: var(--marine);
  -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat;
  transform: rotate(90deg);
}
.faq details[open] summary::after { transform: rotate(-90deg); }
.faq summary h3 { font: inherit; }
.faq details p { margin: 0 0 22px; max-width: 880px; }
@media (min-width: 720px) { .faq summary { font-size: 22px; padding: 22px 0; } }

/* ---------- Bande d'appel (fond marine) ---------- */
.bande-appel__grille { display: flex; flex-direction: column; gap: 24px; padding-block: 44px; }
.bande-appel h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.bande-appel .pile { gap: 12px; }
.bande-appel .btn {
  min-height: 72px; padding: 8px 24px; border-radius: 20px;
  font-family: var(--police-titre); font-size: clamp(26px, 3.4vw, 40px); white-space: nowrap; gap: 14px;
}
.bande-appel .btn .ico { width: 1em; height: 1em; }
@media (min-width: 1000px) {
  .bande-appel__grille { flex-direction: row; align-items: center; justify-content: space-between; gap: 56px; padding-block: 72px; }
  .bande-appel .pile { flex: 1 1 480px; }
  .bande-appel .btn { min-height: 84px; padding-inline: 32px; }
}

/* ---------- Contact ---------- */
.contact-grand {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--police-titre); font-weight: 700; font-size: clamp(32px, 8.4vw, 60px); line-height: 1.1;
  color: var(--cyan); text-decoration: none; white-space: nowrap;
}
.contact-grand:hover { color: #FFFFFF; }
.contact-grand .ico { width: 0.75em; height: 0.75em; }
.section--marine a.lien-clair { color: #FFFFFF; font-weight: 700; }

.coordonnees { display: flex; flex-direction: column; gap: 14px; }
.coordonnees li { display: flex; align-items: flex-start; gap: 12px; }
.coordonnees .ico { width: 26px; height: 26px; margin-top: 3px; }
.coordonnees a { font-weight: 700; display: inline-block; padding-block: 10px; margin-block: -10px; }

.formulaire { display: flex; flex-direction: column; gap: 18px; color: var(--texte); }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-weight: 700; }
.champ label span { font-weight: 400; color: var(--texte-3); }
.champ input, .champ textarea {
  width: 100%; min-height: 60px; padding: 0 18px;
  font: inherit; color: var(--texte); background: #FFFFFF;
  border: 2px solid var(--bordure-champ); border-radius: var(--rayon-s);
}
.champ textarea { padding-block: 14px; resize: vertical; min-height: 150px; }
.champ input:focus, .champ textarea:focus { border-color: var(--marine); }
.champ--piege { position: absolute; left: -9999px; }
.formulaire .btn { min-height: 64px; font-family: var(--police-titre); font-size: 21px; }
.section--marine .formulaire.carte { border-color: transparent; }
@media (min-width: 1000px) {
  .hero--contact .hero__texte { flex: 1 1 440px; }
  .formulaire--page { flex: 1 1 460px; }
}

/* ---------- Pied de page ---------- */
.pied { background: var(--marine-fonce); color: var(--sur-marine); font-size: 17px; }
.pied__grille { display: flex; flex-direction: column; gap: 20px; padding-block: 36px; }
.pied__marque { display: flex; align-items: center; gap: 16px; line-height: 1.4; }
.pied__logo { background: #FFFFFF; border-radius: var(--rayon-s); padding: 8px 12px; }
.pied__logo img { height: 36px; width: auto; }
.pied__marque strong { display: block; color: #FFFFFF; }
.pied nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.pied nav a { display: inline-flex; align-items: center; min-height: 48px; color: #FFFFFF; }
@media (min-width: 720px) { .pied { font-size: 18px; } }
@media (min-width: 1000px) { .pied__grille { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding-block: 40px; } }

/* ---------- Barre d'appel fixe (téléphone uniquement) ---------- */
.barre-appel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #FFFFFF; border-top: 1px solid var(--bordure); box-shadow: 0 -6px 18px rgba(7, 32, 62, 0.12);
}
.barre-appel .btn { width: 100%; min-height: 60px; font-family: var(--police-titre); font-size: 21px; }
.barre-appel .btn .ico { width: 26px; height: 26px; background-color: var(--cyan); }
body { padding-bottom: 82px; }
body.sans-barre { padding-bottom: 0; }
@media (min-width: 720px) {
  .barre-appel { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Impression ---------- */
@media print {
  .entete__tel, .barre-appel, .menu, .evitement { display: none; }
  body { padding-bottom: 0; }
  .section--marine, .tarif-base { background: #FFFFFF; color: var(--texte); }
}

/* ==========================================================================
   Compléments d'intégration (mise en production, octobre 2026).
   Tout ce qui précède est la feuille du dossier de conception, inchangée à
   part le chemin des polices. Ce bloc ajoute ce que les maquettes ne
   montraient pas : messages du formulaire, auteur des avis, pages de texte,
   maillage des pages locales.
   ========================================================================== */

/* Formulaire : erreurs en texte près du champ, pas seulement en couleur */
.champ__erreur { margin: 0; color: #8A1C1C; font-size: 18px; }
.champ--erreur input, .champ--erreur textarea { border-color: #8A1C1C; border-width: 3px; }
.message-formulaire { margin: 0; padding: 14px 18px; border-radius: var(--rayon-s); border: 2px solid; font-size: 18px; }
.message-formulaire--succes { background: #EAF7EE; border-color: #1E6B3A; color: #10391F; }
.message-formulaire--echec { background: #FDEEEE; border-color: #8A1C1C; color: #4D0F0F; }
.message-formulaire strong { display: block; }

/* Avis : nom de l'auteur sous le texte */
.avis__auteur { font-size: 17px; color: var(--texte-3); }

/* Bandeau à trois éléments quand la note Google n'est pas disponible */
@media (min-width: 1000px) { .bandeau ul:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }

/* Pages de texte (mentions légales) */
.texte-page { max-width: 820px; }
.texte-page h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 12px; }
.texte-page a { font-weight: 700; }

/* Pages locales : liste des autres secteurs */
.secteurs-voisins h3 { font-size: 20px; }

/* Le grand numéro du bloc contact de l'accueil faisait 35 px de haut sur
   téléphone : la cible tactile doit atteindre 48 px. */
.contact-grand { min-height: 48px; }