/* ============================================================
   QYLINE — PAGE D'ACCUEIL · « Papier, bleu, jaune »
   ------------------------------------------------------------
   Cette feuille ne concerne QUE la page d'accueil publique
   (index.php). L'espace client, l'administration, le blog et
   les pages légales partagent la même charte, mais elle y est
   portée par assets/theme.css : les deux fichiers ne se
   chargent jamais ensemble.

   ------------------------------------------------------------
   LE PARTI PRIS
   ------------------------------------------------------------
   Un atelier, pas une plaquette. Quatre couleurs franches, une
   seule police très grasse, et des objets qui ont l'air posés
   à la main :

     · de GRANDS APLATS — bandeau bleu quadrillé, papier, encre,
       jaune — qui découpent la page en chapitres ;
     · des TITRES énormes et serrés (Bricolage Grotesque 800) ;
     · des OMBRES DURES : un aplat décalé, jamais de flou ;
     · des BOUTONS qui s'enfoncent de 2 px vers leur ombre ;
     · des LIENS soulignés d'un trait épais ;
     · des ÉTIQUETTES de câble, jaunes ou blanches, penchées ;
     · des CADRES bordés de bleu, posés de travers sur une
       ombre jaune, pour tout ce qui se montre (dessins,
       captures, vidéo).

   ------------------------------------------------------------
   LE RYTHME DE LA PAGE
   ------------------------------------------------------------
     accueil ............ BLEU quadrillé
     services ........... papier
     offres & tarifs .... blanc
     méthode ............ ENCRE
     réalisations ....... papier
     à propos ........... blanc
     avis ............... papier
     journal ............ blanc
     questions .......... papier
     contact ............ JAUNE
     clôture ............ BLEU quadrillé
     pied de page ....... ENCRE

   ------------------------------------------------------------
   SOMMAIRE
   ------------------------------------------------------------
      1 · Couleurs et réglages     9 · Offres & tarifs
      2 · Base                    10 · Méthode
      3 · Liens & boutons         11 · Réalisations
      4 · Barre du haut           12 · À propos & technique
      5 · Sommaire plein écran    13 · Avis & journal
      6 · Accueil (bandeau bleu)  14 · Questions
      7 · Blocs & en-têtes        15 · Contact
      8 · Services                16 · Clôture & pied de page
                                  17 · Divers, mobile, accès
   ============================================================ */


/* ============================================================
   1 · COULEURS ET RÉGLAGES — tout se change ici
   ============================================================ */
:root{
  color-scheme:light;

  --bleu:#24459A;        /* bleu de travail */
  --bleu-fonce:#1B347A;  /* liens et petits titres sur fond clair */
  --jaune:#F5C518;       /* accent */
  --encre:#121A33;       /* texte et fonds sombres */
  --papier:#F4F6FA;      /* fond clair */
  --blanc:#FFFFFF;       /* fond des blocs alternés et des feuilles */
  --gris:#3A4666;        /* texte secondaire sur fond clair */
  --clair:#D5DCF0;       /* texte secondaire sur fond sombre */
  --cadre:#DCE4F5;       /* fond des emplacements de captures */
  --filet:#C3CEEA;       /* séparateurs fins sur fond clair */

  --vert:#17703F;
  --rouge:#C5281C;

  --largeur:1200px;
  --h-tete:76px;         /* hauteur de la barre du haut */
  --bloc:clamp(76px,9.5vw,128px);   /* respiration verticale d'un bloc */

  --police:'Bricolage Grotesque','Trebuchet MS','Segoe UI',system-ui,sans-serif;

  /* Le quadrillage des bandeaux bleus. */
  --grille:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
}
@media (max-width:759px){
  :root{ --h-tete:64px; }
}


/* ============================================================
   2 · BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-tete) + 20px);
}
body{
  margin:0;
  font-family:var(--police);
  font-size:1.125rem;
  line-height:1.55;
  color:var(--encre);
  background:var(--papier);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
h1,h2,h3,h4{font-weight:800;line-height:1;letter-spacing:-.03em;text-wrap:balance;}
p,li{text-wrap:pretty;}
img,svg,video{max-width:100%;display:block;}
img{height:auto;}
button,input,select,textarea{font-family:inherit;}
a{color:inherit;}

::selection{background:var(--jaune);color:var(--encre);}

:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:3px solid currentColor;
  outline-offset:4px;
}

.conteneur{max-width:var(--largeur);margin:0 auto;}

[hidden]{display:none !important;}
/* Sans JavaScript la vidéo d'atelier ne se charge jamais : son cadre resterait vide. */
.no-js .atelier{display:none;}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.mono{font-family:Consolas,Menlo,'SF Mono',monospace;font-size:.92em;}

/* Le passage au contenu, visible dès qu'il reçoit le focus. */
.saut{
  position:fixed;left:14px;top:-80px;z-index:200;
  padding:12px 18px;border-radius:4px;
  background:var(--jaune);color:var(--encre);
  font-weight:700;text-decoration:none;
  box-shadow:4px 4px 0 var(--encre);
}
.saut:focus{top:14px;}


/* ============================================================
   3 · LIENS & BOUTONS
   ============================================================ */

/* ---------- Liens soulignés ---------- */
.lien{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  font-weight:600;
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}
.lien:hover{text-decoration-thickness:4px;}
.lien svg{flex:0 0 auto;}
.lien-fort{color:var(--bleu-fonce);font-weight:700;}

/* Les liens posés dans un paragraphe suivent la même règle. */
:where(p,li,dd) a:not([class]){
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}
:where(p,li,dd) a:not([class]):hover{text-decoration-thickness:4px;}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:16px 28px;
  border:0;
  border-radius:4px;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.bouton:hover{transform:translate(2px,2px);}
.bouton:active{transform:translate(4px,4px);}
.bouton svg{flex:0 0 auto;}
.bouton-jaune{background:var(--jaune);color:var(--encre);box-shadow:5px 5px 0 var(--encre);}
.bouton-jaune:hover{box-shadow:3px 3px 0 var(--encre);}
.bouton-jaune:active{box-shadow:1px 1px 0 var(--encre);}
.bouton-encre{background:var(--encre);color:#fff;box-shadow:5px 5px 0 var(--bleu);}
.bouton-encre:hover{box-shadow:3px 3px 0 var(--bleu);}
.bouton-encre:active{box-shadow:1px 1px 0 var(--bleu);}
.bouton-min{padding:10px 16px;font-size:1rem;box-shadow:3px 3px 0 var(--encre);}
.bouton-min:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--encre);}
.bouton-large{width:100%;justify-content:center;}
.bouton[disabled]{opacity:.6;cursor:wait;transform:none;}

/* ---------- Étiquette fixe : le petit repère jaune penché ---------- */
.repere{
  display:inline-flex;align-items:center;
  padding:6px 13px;
  border-radius:3px;
  background:var(--jaune);color:var(--encre);
  font-size:1rem;font-weight:700;line-height:1.3;
  box-shadow:3px 4px 0 var(--encre);
  transform:rotate(-2deg);
}


/* ============================================================
   4 · BARRE DU HAUT
   ------------------------------------------------------------
   Posée sur le bandeau bleu, elle est transparente : on ne voit
   qu'un logo et des liens soulignés. Dès que la page défile,
   elle devient une barre bleue pleine, fermée par un trait
   d'encre, qui reste accessible sur toute la page.

   Sans JavaScript elle ne se fige pas : elle reste en haut du
   bandeau et défile avec lui.
   ============================================================ */
.barre{
  position:fixed;inset:0 0 auto;z-index:90;
  padding:0 24px;
  color:#fff;
  transition:background-color .18s ease, box-shadow .18s ease;
}
.no-js .barre{position:absolute;}
.barre.serre{
  background-color:var(--bleu);
  background-image:var(--grille);
  background-size:36px 36px;
  box-shadow:0 2px 0 var(--encre);
}
.barre-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 28px;
  height:var(--h-tete);
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:1.6rem;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
}
/* Le logo est un tracé lumineux pensé pour un fond sombre : il
   est donc posé sur une petite plaque d'encre, qui le garde
   lisible sur le bleu, le papier ou le jaune. Il n'est pas
   carré : on lui donne une boîte, jamais une taille fixe. */
.logo img{
  flex:0 0 auto;
  width:auto;height:auto;
  max-width:56px;max-height:36px;
  padding:4px 5px;
  object-fit:contain;
  background:var(--encre);
  border-radius:4px;
  box-shadow:2px 2px 0 var(--jaune);
}
.logo small{
  display:block;margin-top:5px;
  font-size:.82rem;font-weight:600;letter-spacing:0;
  color:var(--clair);white-space:nowrap;
}

.menu{display:none;flex-wrap:wrap;gap:4px 24px;}
.menu .lien{font-size:1.02rem;}
.menu .lien[aria-current="true"]{text-decoration-thickness:4px;}
@media (min-width:1200px){ .menu{display:flex;} }

.barre-act{display:flex;align-items:center;gap:8px 18px;flex:0 0 auto;}
.lien-espace{display:none;font-size:1.02rem;}
@media (min-width:640px){ .lien-espace{display:inline-flex;} }

/* L'appel à l'action ne disparaît JAMAIS de la barre : c'est son
   intitulé qui se raccourcit sur petit écran. */
.t-court{display:inline;}
.t-long{display:none;}
@media (min-width:760px){
  .t-court{display:none;}
  .t-long{display:inline;}
}

/* Le bouton de sommaire : trois traits, et le mot sur écran large. */
.somm-btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 4px;
  background:none;border:0;cursor:pointer;
  font-size:1.02rem;font-weight:600;color:inherit;
}
.somm-btn > span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;}
.somm-btn:hover > span{text-decoration-thickness:4px;}
.somm-btn i{display:block;width:24px;height:16px;position:relative;flex:0 0 auto;}
.somm-btn i::before,.somm-btn i::after,.somm-btn i b{
  content:"";position:absolute;left:0;width:24px;height:3px;background:currentColor;
  transition:transform .18s ease, opacity .12s ease;
}
.somm-btn i::before{top:0;}
.somm-btn i b{top:6.5px;}
.somm-btn i::after{top:13px;}
.somm-btn[aria-expanded="true"] i::before{transform:translateY(6.5px) rotate(45deg);}
.somm-btn[aria-expanded="true"] i::after{transform:translateY(-6.5px) rotate(-45deg);}
.somm-btn[aria-expanded="true"] i b{opacity:0;}
/* Quand le menu en ligne est affiché, le mot « Sommaire » se retire. */
@media (min-width:1200px){
  .barre .somm-btn > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
}
@media (max-width:459px){
  .barre .somm-btn > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .barre{padding:0 16px;}
  .barre .logo{font-size:1.3rem;gap:9px;}
  .barre .logo img{max-width:44px;max-height:30px;}
  .barre .bouton-min{padding:9px 12px;font-size:.95rem;}
}
@media (max-width:359px){
  .barre .logo{font-size:1.15rem;letter-spacing:.02em;}
  .barre .logo img{display:none;}
}

/* La jauge de lecture : un trait jaune en haut de l'écran. Sur une
   page longue, elle dit où l'on en est. */
.jauge{
  position:fixed;top:0;left:0;height:4px;z-index:95;
  width:100%;transform-origin:left;transform:scaleX(var(--p,0));
  background:var(--jaune);
}


/* ============================================================
   5 · SOMMAIRE PLEIN ÉCRAN
   ------------------------------------------------------------
   Le même écran sur téléphone et sur ordinateur : le bandeau
   bleu quadrillé, et une entrée par section.
   ============================================================ */
.sommaire{
  position:fixed;inset:0;z-index:120;
  padding:0 24px;
  color:#fff;
  background-color:var(--bleu);
  background-image:var(--grille);
  background-size:36px 36px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
  overflow-y:auto;overscroll-behavior:contain;
}
.sommaire.ouvert{opacity:1;visibility:visible;transition-delay:0s;}

.somm-haut{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--h-tete);flex:0 0 auto;
  width:100%;max-width:var(--largeur);margin:0 auto;
}
.somm-corps{
  flex:1 0 auto;width:100%;max-width:var(--largeur);margin:0 auto;
  padding:clamp(18px,4vw,44px) 0 clamp(32px,5vw,64px);
}
.somm-liste{list-style:none;margin:0;padding:0;border-top:2px solid rgba(255,255,255,.28);}
.somm-lien{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;gap:14px;
  padding:clamp(13px,1.8vw,19px) 0;
  border-bottom:2px solid rgba(255,255,255,.28);
  text-decoration:none;color:#fff;
}
.somm-num{font-weight:800;font-size:1.05rem;color:var(--jaune);}
.somm-txt strong{
  display:block;
  font-weight:800;font-size:clamp(1.6rem,4vw,2.75rem);
  line-height:1;letter-spacing:-.03em;
}
.somm-txt small{display:block;margin-top:6px;font-size:1rem;color:#E6ECFA;}
.somm-lien:hover .somm-txt strong,
.somm-lien[aria-current="true"] .somm-txt strong{
  text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px;
}
.somm-fleche{
  width:34px;height:34px;border-radius:3px;
  background:var(--jaune);box-shadow:2px 3px 0 var(--encre);
  position:relative;transition:transform .12s ease;
}
.somm-fleche::before{
  content:"";position:absolute;left:10px;top:10px;width:11px;height:11px;
  border-top:3px solid var(--encre);border-right:3px solid var(--encre);
  transform:rotate(45deg) translate(-1px,1px);
}
.somm-lien:hover .somm-fleche{transform:rotate(-4deg) scale(1.06);}

.somm-pied{
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
  margin-top:clamp(24px,4vw,44px);
}
.somm-pied .bouton{margin-left:auto;}
@media (max-width:599px){
  .somm-lien{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;}
  .somm-pied .bouton{margin-left:0;}
}


/* ============================================================
   6 · ACCUEIL — le bandeau bleu
   ============================================================ */
.accueil{
  position:relative;
  padding:0 24px;
  color:#fff;
  background-color:var(--bleu);
  background-image:var(--grille);
  background-size:36px 36px;
}
.accueil .conteneur{
  display:flex;
  flex-direction:column;
  gap:72px;
  padding-top:calc(var(--h-tete) + 56px);
}

.accroche{display:flex;flex-direction:column;gap:40px;}
.sur-titre{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  margin-bottom:-8px;
}
.sur-titre .metiers{font-weight:600;color:#E6ECFA;}
.sur-titre .metiers i{font-style:normal;color:var(--jaune);margin:0 6px;font-weight:800;}

.accroche h1{
  max-width:1100px;
  font-size:clamp(2.75rem,8.2vw,7rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.035em;
  text-wrap:balance;
}
/* Le titre accepte une barre verticale dans Admin → Paramètres
   pour forcer la coupure en deux lignes. */
.accroche h1 .fin{display:block;}

.accroche-bas{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px 64px;
}
.accroche-bas p{
  flex:1 1 320px;
  max-width:34rem;
  font-size:1.3rem;
  line-height:1.5;
  color:#E6ECFA;
}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;}
.accroche-note{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:-12px;
  font-weight:600;color:#E6ECFA;
}
.accroche-note svg{flex:0 0 auto;margin-top:5px;color:var(--jaune);}

/* Étiquettes de câble : à cheval sur le bleu et le papier.
   Ici, chacune ouvre un type de projet. */
.etiquettes{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:16px 22px;
  margin-bottom:-34px;
}
.etiquettes-tit{
  flex:1 0 100%;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 28px;
  font-weight:700;color:#fff;
}
.etiquette{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-height:44px;
  max-width:21rem;
  padding:12px 18px;
  border-radius:3px;
  background:var(--jaune);
  color:var(--encre);
  font-weight:700;
  text-decoration:none;
  box-shadow:3px 4px 0 var(--encre);
  transition:transform .15s ease;
}
.etiquette strong{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;line-height:1.1;}
.etiquette small{font-size:.95rem;font-weight:500;line-height:1.35;}
.etiquette:nth-of-type(even){background:#fff;}
.etiquette:nth-of-type(1){transform:rotate(-2deg);}
.etiquette:nth-of-type(2){transform:rotate(1.5deg);}
.etiquette:nth-of-type(3){transform:rotate(-1deg);}
.etiquette:nth-of-type(4){transform:rotate(2.5deg);}
.etiquette:nth-of-type(5){transform:rotate(-2deg);}
.etiquette:hover{transform:rotate(0deg) scale(1.04);}
.etiquette-mini{font-size:1rem;align-self:center;}


/* ============================================================
   7 · BLOCS & EN-TÊTES DE SECTION
   ============================================================ */
.bloc{padding:var(--bloc) 24px;}
.bloc.blanc{background:var(--blanc);}
/* Le premier bloc reçoit les étiquettes qui débordent du bandeau. */
.accueil + .bloc{padding-top:calc(var(--bloc) + 16px);}

.pile{display:flex;flex-direction:column;gap:clamp(64px,8vw,104px);}

/* Le petit titre au-dessus d'un grand : « § 02 — Offres & tarifs ». */
.genre{color:var(--bleu-fonce);font-weight:600;}

.intro{display:flex;flex-direction:column;gap:16px;max-width:46rem;}
.intro h2{
  font-size:clamp(2.1rem,5vw,3.75rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
.intro > p:not(.genre){color:var(--gris);font-size:1.2rem;}
/* Les titres de section étaient coupés en deux lignes : la coupure
   reste, la seconde ligne n'est plus allégée. */
h2 .fin{display:block;}

/* ---------- La cote : la façon d'afficher un prix ----------
   Un libellé, un trait pointillé, la valeur en grand. */
.cote{
  display:flex;align-items:baseline;gap:12px;
  min-width:0;
}
.cote-etiq{font-weight:600;color:var(--gris);white-space:nowrap;}
.cote-fil{flex:1 1 24px;min-width:18px;border-bottom:3px dotted var(--filet);transform:translateY(-5px);}
.cote-val{
  font-weight:800;font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1;letter-spacing:-.035em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.cote-val small{font-size:.55em;font-weight:700;letter-spacing:0;}

/* ---------- Liste de points : un carré jaune par ligne ---------- */
.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.points li{display:flex;gap:13px;align-items:flex-start;}
.points li > span{min-width:0;}
.points li::before{
  content:"";flex:0 0 auto;margin-top:.5em;
  width:11px;height:11px;border-radius:2px;
  background:var(--jaune);box-shadow:2px 2px 0 var(--encre);
}

/* ---------- Cadre : emplacement de capture, de dessin, de vidéo ----------
   Bord bleu, ombre jaune, posé légèrement de travers. Sans image, le
   fond hachuré dit clairement « emplacement ». */
.capture{
  position:relative;
  flex:1 1 420px;
  min-width:0;
  aspect-ratio:16 / 10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border:2px solid var(--bleu);
  background-color:var(--cadre);
  background-image:repeating-linear-gradient(135deg, rgba(36,69,154,.14) 0 2px, transparent 2px 16px);
  box-shadow:10px 10px 0 var(--jaune);
  transform:rotate(1deg);
  overflow:hidden;
  text-decoration:none;
  color:var(--encre);
}
.capture:has(img),.capture:has(video){padding:0;background-image:none;}
.capture img,.capture video{width:100%;height:100%;object-fit:cover;object-position:top center;}
.capture p,.capture figcaption{
  padding:8px 14px;
  background:#fff;
  color:var(--bleu-fonce);
  font-weight:600;
  text-align:center;
}
/* Un cadre qui porte un dessin : fond blanc uni, le dessin respire. */
.capture.dessinee{background-color:#fff;background-image:none;padding:clamp(18px,3vw,34px);}
.capture.dessinee figcaption,.capture .legende-cadre{
  position:absolute;left:0;bottom:0;
  padding:6px 12px;
  background:var(--bleu);color:#fff;
  font-size:.95rem;font-weight:700;
}
a.capture:hover{box-shadow:6px 6px 0 var(--jaune);transform:rotate(0deg) translate(2px,2px);}
a.capture{transition:transform .15s ease, box-shadow .15s ease;}

/* ---------- Un « projet » : cadre d'un côté, texte de l'autre ---------- */
.projet{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:44px 72px;
  scroll-margin-top:calc(var(--h-tete) + 24px);
}
.projet.inverse{flex-direction:row-reverse;}
.projet.inverse .capture{box-shadow:-10px 10px 0 var(--jaune);transform:rotate(-1deg);}
.projet.inverse a.capture:hover{box-shadow:-6px 6px 0 var(--jaune);transform:rotate(0deg) translate(-2px,2px);}

.texte{
  flex:1 1 360px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.texte h3{
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
.texte .description{max-width:34rem;}
.technos{color:var(--gris);font-size:1rem;}
.texte .lien{color:var(--bleu-fonce);font-weight:700;}
.texte .points{margin-top:4px;}
.texte-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 32px;width:100%;margin-top:10px;
  padding-top:18px;border-top:2px solid var(--encre);
}
.texte-bas .cote{flex:1 1 230px;}

/* Projet mis en avant : grand cadre, texte dessous */
.projet.vedette{flex-direction:column;align-items:stretch;gap:44px;}
.projet.vedette .capture{
  flex:none;
  aspect-ratio:21 / 9;
  min-height:220px;
  margin-right:12px;
  box-shadow:12px 12px 0 var(--jaune);
  transform:rotate(-.6deg);
}
.vedette-texte{display:flex;flex-wrap:wrap;gap:20px 64px;}
.vedette-titre{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px;}
.vedette-titre h3{
  font-size:clamp(2.2rem,5.5vw,4.25rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
.vedette-detail{
  flex:2 1 420px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}
.vedette-detail p{font-size:1.25rem;max-width:40rem;}
.vedette-detail .technos{font-size:1rem;}
.vedette-detail .lien{color:var(--bleu-fonce);font-weight:700;}


/* ============================================================
   8 · SERVICES — les dessins
   ------------------------------------------------------------
   Chaque métier porte un dessin au trait, écrit à la main en
   SVG : une page, un flux de données, deux écrans reliés.
   Traits à l'encre, aplats jaunes, repères bleus.
   ============================================================ */
.dessin{width:100%;height:auto;color:var(--encre);overflow:visible;}
.dessin [stroke],.dessin rect,.dessin path{vector-effect:non-scaling-stroke;}
.d-fil{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.5;}
.d-fort{fill:none;stroke:currentColor;stroke-width:2.5;}
.d-accent{fill:none;stroke:var(--bleu);stroke-width:2.5;}
.d-aplat{fill:var(--jaune);stroke:none;}
.d-aplat-2{fill:var(--bleu);opacity:.2;stroke:none;}
.d-repere{stroke:var(--bleu);stroke-width:1.5;opacity:.45;fill:none;}
.d-aa{font-family:var(--police);font-size:34px;font-weight:800;fill:currentColor;letter-spacing:-.03em;}


/* ============================================================
   9 · OFFRES & TARIFS
   ------------------------------------------------------------
   Une ligne par offre : une référence, un nom, une nature, un
   montant. La ligne s'ouvre pour donner son détail, une seule
   à la fois. Sans JavaScript, toutes sont ouvertes.
   ============================================================ */
.nomen{border-top:3px solid var(--encre);}

.nomen-tete{
  display:none;
  grid-template-columns:54px minmax(0,1fr) 190px 190px 40px;
  gap:18px;align-items:center;
  padding:12px 0;border-bottom:2px solid var(--encre);
  font-size:1rem;font-weight:600;color:var(--gris);
}
.nomen-tete .dr{text-align:right;}
@media (min-width:900px){ .nomen-tete{display:grid;} }

.nomen-l{position:relative;border-bottom:2px solid var(--encre);}
.nomen-l h3{margin:0;font:inherit;letter-spacing:0;}

.nomen-btn{
  display:grid;width:100%;
  grid-template-columns:40px minmax(0,1fr) 40px;
  gap:6px 14px;align-items:center;
  padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:inherit;color:var(--encre);
}
@media (min-width:900px){
  .nomen-btn{grid-template-columns:54px minmax(0,1fr) 190px 190px 40px;gap:18px;padding:22px 0;}
}
.nomen-btn:hover .nomen-nom{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;}
.nomen-btn:focus-visible{outline-offset:-3px;}

.nomen-ref{font-weight:800;color:var(--bleu-fonce);font-variant-numeric:tabular-nums;}
.nomen-nom{
  font-weight:800;font-size:clamp(1.25rem,2.3vw,1.6rem);
  line-height:1.12;letter-spacing:-.025em;
}
/* « Le plus demandé » : une étiquette jaune accrochée au nom. */
.nomen-nom em{
  display:inline-block;margin-left:12px;vertical-align:middle;
  padding:3px 10px;border-radius:3px;
  background:var(--jaune);color:var(--encre);
  font-style:normal;font-size:.92rem;font-weight:700;letter-spacing:0;line-height:1.3;
  box-shadow:2px 3px 0 var(--encre);
  transform:rotate(-2deg);
  text-decoration:none;
}
.nomen-nat{grid-column:2;color:var(--gris);font-size:1.02rem;}
@media (min-width:900px){ .nomen-nat{grid-column:auto;} }

.nomen-prix{
  grid-column:2;display:flex;align-items:baseline;gap:8px;
  font-weight:800;font-size:clamp(1.5rem,2.8vw,1.95rem);
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.nomen-prix small{font-size:.95rem;font-weight:600;letter-spacing:0;color:var(--gris);}
.nomen-prix small:last-child{color:inherit;font-weight:700;font-size:.6em;}
.nomen-prix em{font-style:normal;font-size:1.1rem;font-weight:700;letter-spacing:0;color:var(--gris);}
@media (min-width:900px){ .nomen-prix{grid-column:auto;justify-content:flex-end;} }

/* Le signe d'ouverture : un carré jaune, une croix qui devient un moins. */
.nomen-plus{
  position:relative;width:34px;height:34px;justify-self:end;
  grid-column:3;grid-row:1;
  border-radius:3px;background:var(--jaune);box-shadow:2px 3px 0 var(--encre);
}
@media (min-width:900px){ .nomen-plus{grid-column:auto;grid-row:auto;} }
.nomen-plus::before,.nomen-plus::after{
  content:"";position:absolute;left:9px;top:15.5px;width:16px;height:3px;background:var(--encre);
  transition:transform .18s ease;
}
.nomen-plus::after{transform:rotate(90deg);}
.nomen-btn[aria-expanded="true"] .nomen-plus::after{transform:rotate(0);}

/* Le panneau. L'ouverture se fait sur grid-template-rows : aucune
   mesure en JavaScript, donc aucun saut.
   L'état PAR DÉFAUT est ouvert, et c'est volontaire : sans
   JavaScript, toutes les offres restent lisibles. C'est le script
   qui les replie au chargement. */
.nomen-pan{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease;}
.nomen-l.replie .nomen-pan{grid-template-rows:0fr;}
.nomen-pan > div{overflow:hidden;}
.nomen-pan-in{display:grid;gap:26px clamp(24px,4vw,56px);padding:4px 0 34px;}
@media (min-width:760px){
  .nomen-pan-in{grid-template-columns:minmax(0,1fr) minmax(240px,320px);align-items:start;}
}
@media (min-width:900px){ .nomen-pan-in{padding-left:72px;} }
.nomen-pan-in > div:first-child > p{margin:0 0 18px;max-width:52ch;}
.nomen-aside{
  display:flex;flex-direction:column;gap:20px;
  padding:20px;margin:0 12px 12px 0;
  background:var(--papier);border:2px solid var(--encre);border-radius:4px;
  box-shadow:6px 6px 0 var(--jaune);
}
.nomen-aside .bouton{justify-content:center;}

/* ---------- Frais de fonctionnement ---------- */
.frais{margin-top:clamp(52px,6vw,84px);}
.frais-tete{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:flex-end;justify-content:space-between;
  padding-bottom:18px;border-bottom:3px solid var(--encre);
}
.frais-tete h3{font-size:clamp(1.6rem,3vw,2.25rem);}
.frais-tete p{max-width:46ch;color:var(--gris);}
.frais-liste > div{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;
  padding:16px 0;border-bottom:2px solid var(--filet);
}
.frais-liste dt{font-weight:700;font-size:1.2rem;letter-spacing:-.015em;}
.frais-liste dt small{display:block;margin-top:2px;font-size:1rem;font-weight:400;letter-spacing:0;color:var(--gris);}
.frais-liste dd{
  font-weight:800;font-size:1.45rem;letter-spacing:-.03em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.frais-liste dd span{font-size:1rem;font-weight:600;letter-spacing:0;color:var(--gris);margin-left:6px;}

.mention{margin-top:26px;max-width:80ch;font-size:1rem;color:var(--gris);}


/* ============================================================
   10 · MÉTHODE — sur encre
   ------------------------------------------------------------
   Quatre étapes, et surtout UN SEUL objet montré à quatre
   états : la feuille, la structure, l'identité, la mise en
   ligne. Chaque étape est coiffée d'un trait jaune.
   ============================================================ */
.services{padding:var(--bloc) 24px;background:var(--encre);color:#fff;}
.services .conteneur{display:flex;flex-direction:column;gap:clamp(48px,6vw,72px);}
.services-tete{display:flex;flex-direction:column;gap:20px;}
.services .genre{color:var(--jaune);}
.services h2{
  max-width:60rem;
  font-size:clamp(2.1rem,5.4vw,4.25rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.services-tete > p:not(.genre){max-width:44rem;font-size:1.2rem;color:var(--clair);}
.liste-services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:48px 40px;
}
.service{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:24px;
  border-top:4px solid var(--jaune);
}
.service h3{font-size:1.6rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;}
.service p{color:var(--clair);}
.service .service-ref{color:var(--jaune);font-weight:700;}
.service .service-leg{
  margin-top:auto;padding-top:14px;
  color:#fff;font-weight:600;
}
.service-fig{margin:0 0 6px;}
.service-fig figcaption{
  margin-bottom:10px;
  font-size:.95rem;font-weight:600;color:var(--clair);
}
.services .dessin{color:#fff;max-width:320px;}
.services .d-accent{stroke:var(--jaune);}
.services .d-aplat-2{fill:#fff;opacity:.18;}

/* Le règlement : une information de contrat, donnée telle quelle. */
.reglement{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px clamp(20px,3vw,32px);
  border:2px solid rgba(255,255,255,.3);border-left:8px solid var(--jaune);
  border-radius:4px;
}
.reglement svg{flex:0 0 auto;color:var(--jaune);margin-top:4px;}
.reglement p{color:var(--clair);max-width:74ch;}
.reglement strong{display:block;color:#fff;font-weight:700;margin-bottom:4px;font-size:1.2rem;}


/* ============================================================
   11 · RÉALISATIONS
   ------------------------------------------------------------
   Sans image, le cadre n'est pas un trou : c'est une planche
   typographique sur fond hachuré.
   ============================================================ */
.capture-typo{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:100%;text-align:center;
}
.capture-typo b{
  padding:8px 16px;background:#fff;color:var(--encre);
  font-weight:800;font-size:clamp(1.7rem,4.6vw,3.4rem);
  line-height:1;letter-spacing:-.04em;overflow-wrap:anywhere;
  box-shadow:4px 4px 0 var(--encre);
}
.capture-typo span{
  padding:5px 12px;background:var(--bleu);color:#fff;
  font-size:1rem;font-weight:600;overflow-wrap:anywhere;
}
.capture .voir{
  position:absolute;left:0;bottom:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;background:var(--jaune);color:var(--encre);
  font-size:1rem;font-weight:700;
}
.projet-meta{display:flex;flex-wrap:wrap;gap:8px 10px;}
.projet-meta span{
  padding:3px 10px;border-radius:3px;
  background:var(--blanc);color:var(--encre);
  font-size:.95rem;font-weight:600;overflow-wrap:anywhere;
  box-shadow:inset 0 0 0 1.5px var(--encre);
}


/* ============================================================
   12 · À PROPOS & TECHNIQUE
   ============================================================ */
.apropos{display:grid;gap:clamp(40px,5vw,72px);align-items:start;}
@media (min-width:940px){ .apropos{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);} }
.apropos-cote{display:flex;flex-direction:column;gap:38px;min-width:0;}

/* La fiche d'identité : une feuille bordée d'encre, en-tête plein. */
.fiche-id{
  background:var(--blanc);border:2px solid var(--encre);border-radius:4px;
  box-shadow:8px 8px 0 var(--cadre);overflow:hidden;
}
.fiche-id-haut{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;background:var(--encre);color:var(--clair);font-weight:600;font-size:1rem;
}
.fiche-id-haut b{color:#fff;font-weight:800;letter-spacing:.04em;}
.fiche-id dl > div{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:baseline;
  padding:12px 18px;border-bottom:2px solid var(--filet);
}
.fiche-id dl > div:last-child{border-bottom:0;}
.fiche-id dt{font-size:1rem;font-weight:600;color:var(--gris);}
.fiche-id dd{font-weight:700;overflow-wrap:anywhere;}

/* La vidéo de marque dans son cadre : chargée seulement à l'approche. */
.atelier{aspect-ratio:16 / 9;flex:none;transform:rotate(-1deg);background-color:var(--encre);background-image:none;padding:0;}

.apropos-txt{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;}
.apropos-txt h2{
  font-size:clamp(2.1rem,5vw,3.75rem);
  font-weight:800;line-height:1;letter-spacing:-.03em;
}
.apropos-lead{font-size:1.3rem;line-height:1.45;font-weight:600;max-width:36rem;margin-top:8px;}
.apropos-txt > p:not(.genre):not(.apropos-lead){color:var(--gris);max-width:38rem;}
.principes{width:100%;margin:12px 0 8px;border-top:3px solid var(--encre);}
.principes > div{padding:16px 0;border-bottom:2px solid var(--filet);}
.principes dt{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:4px;}
.principes dd{color:var(--gris);max-width:38rem;}

.tech{
  display:grid;gap:clamp(28px,4vw,64px);min-width:0;
  margin-top:clamp(56px,7vw,96px);
}
.tech > *{min-width:0;}
@media (min-width:900px){ .tech{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start;} }
.tech-mot{color:var(--gris);max-width:30rem;}
.tech-mot strong{
  display:block;margin-bottom:14px;color:var(--encre);
  font-weight:800;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.02;letter-spacing:-.03em;
}
.legende{border-top:3px solid var(--encre);min-width:0;}
.legende > div{
  display:grid;gap:4px 24px;align-items:baseline;min-width:0;
  padding:15px 0;border-bottom:2px solid var(--filet);
}
.legende dt,.legende dd{min-width:0;overflow-wrap:break-word;}
@media (min-width:600px){ .legende > div{grid-template-columns:128px minmax(0,1fr);} }
.legende dt{font-weight:600;color:var(--gris);font-size:1rem;}
.legende dd{font-weight:700;}
.legende dd i{font-style:normal;color:var(--bleu);margin:0 4px;font-weight:800;}


/* ============================================================
   13 · AVIS & JOURNAL
   ------------------------------------------------------------
   Ces deux blocs n'existent que si la base contient de vrais
   avis validés et de vrais articles.
   ============================================================ */
.avis-moy{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--gris);font-weight:600;}
.avis-moy b{font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--encre);}
.avis-l{display:grid;gap:36px 32px;}
@media (min-width:820px){ .avis-l{grid-template-columns:repeat(3,minmax(0,1fr));} }
.avis-c{
  display:flex;flex-direction:column;gap:16px;
  padding:24px;margin:0 8px 8px 0;
  background:var(--blanc);border:2px solid var(--encre);border-radius:4px;
  box-shadow:8px 8px 0 var(--jaune);
}
.avis-c:nth-child(odd){transform:rotate(-.6deg);}
.avis-c:nth-child(even){transform:rotate(.6deg);}
.avis-note{font-size:1.15rem;letter-spacing:.14em;color:var(--bleu);}
.avis-c blockquote{margin:0;font-size:1.15rem;line-height:1.5;font-weight:500;}
.avis-c blockquote::before{content:"« ";}
.avis-c blockquote::after{content:" »";}
.avis-qui{
  display:flex;align-items:center;gap:12px;margin-top:auto;
  padding-top:16px;border-top:2px solid var(--filet);
}
.avis-ava{
  width:42px;height:42px;flex:0 0 auto;overflow:hidden;border-radius:3px;
  background:var(--jaune);color:var(--encre);box-shadow:2px 2px 0 var(--encre);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.avis-ava img{width:100%;height:100%;object-fit:cover;}
.avis-qui b{display:block;font-weight:800;line-height:1.2;}
.avis-qui span span{display:block;font-size:.95rem;color:var(--gris);}

.journal{border-top:3px solid var(--encre);}
.journal-l{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 24px;align-items:center;
  padding:22px 0;border-bottom:2px solid var(--encre);
  text-decoration:none;color:var(--encre);
}
.journal-d{font-weight:700;color:var(--bleu-fonce);white-space:nowrap;font-variant-numeric:tabular-nums;}
.journal-l h3{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.1;letter-spacing:-.025em;}
.journal-l p{margin-top:6px;color:var(--gris);font-size:1.05rem;}
.journal-l:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;}
.journal-f{
  width:34px;height:34px;border-radius:3px;position:relative;
  background:var(--jaune);box-shadow:2px 3px 0 var(--encre);
  transition:transform .12s ease;
}
.journal-f::before{
  content:"";position:absolute;left:10px;top:10px;width:11px;height:11px;
  border-top:3px solid var(--encre);border-right:3px solid var(--encre);
  transform:rotate(45deg) translate(-1px,1px);
}
a:hover > .journal-f{transform:rotate(-4deg) scale(1.06);}
@media (max-width:599px){
  .journal-l{grid-template-columns:minmax(0,1fr) auto;}
  .journal-d{grid-column:1 / -1;}
}
.intro-ligne{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;}


/* ============================================================
   14 · QUESTIONS
   ------------------------------------------------------------
   Des <details> natifs : ils s'ouvrent même sans JavaScript, et
   la recherche du navigateur trouve les réponses fermées.
   ============================================================ */
.faq-grille{display:grid;gap:clamp(32px,4vw,72px);align-items:start;}
@media (min-width:940px){
  .faq-grille{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);}
  .faq-grille .intro{position:sticky;top:calc(var(--h-tete) + 32px);}
}
.faq{border-top:3px solid var(--encre);}
.faq details{border-bottom:2px solid var(--encre);}
.faq summary{
  position:relative;display:block;cursor:pointer;list-style:none;
  padding:20px 54px 20px 0;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary h3{font-size:clamp(1.2rem,2.1vw,1.45rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;}
.faq summary:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;}
.faq summary:focus-visible{outline-offset:-3px;}
/* Le même carré jaune que sur les offres. */
.faq summary::before{
  content:"";position:absolute;right:0;top:calc(50% - 17px);
  width:34px;height:34px;border-radius:3px;
  background:var(--jaune);box-shadow:2px 3px 0 var(--encre);
}
.faq summary::after{
  content:"";position:absolute;right:9px;top:calc(50% - 1.5px);
  width:16px;height:3px;background:var(--encre);
  box-shadow:none;
}
.faq summary h3::after{
  content:"";position:absolute;right:9px;top:calc(50% - 1.5px);
  width:16px;height:3px;background:var(--encre);
  transform:rotate(90deg);transition:transform .18s ease;
}
.faq details[open] summary h3::after{transform:rotate(0);}
.faq-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;}
.faq details[open] .faq-corps{grid-template-rows:1fr;}
.faq details.ferme .faq-corps{grid-template-rows:0fr;}
.faq-corps > div{overflow:hidden;}
.faq-corps p{padding:0 54px 24px 0;max-width:68ch;color:var(--gris);}


/* ============================================================
   15 · CONTACT — le grand aplat jaune
   ============================================================ */
.contact{padding:var(--bloc) 24px;background:var(--jaune);}
.contact .conteneur{
  display:grid;gap:clamp(40px,5vw,72px);align-items:start;
}
@media (min-width:980px){ .contact .conteneur{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);} }
.contact-texte{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0;}
.contact .genre{color:var(--encre);}
.contact h2{
  font-size:clamp(2.6rem,7vw,5.75rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.035em;
}
.contact-texte > p:not(.genre){font-size:1.25rem;max-width:32rem;}
.coordonnees{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:8px;}
.coordonnees .bouton-encre{font-size:1.25rem;padding:18px 28px;overflow-wrap:anywhere;}
.coordonnees small{display:block;font-size:1rem;font-weight:600;}
.telephone{font-size:1.9rem;font-weight:800;text-underline-offset:8px;}
.lieu{font-weight:600;}
.contact-rass{display:flex;align-items:flex-start;gap:10px;font-weight:700;}
.contact-rass svg{flex:0 0 auto;margin-top:5px;}
.contact-texte .petit{font-size:1.05rem;max-width:32rem;}

/* La fiche de demande : une feuille blanche posée sur l'encre. */
.fiche{
  min-width:0;
  background:var(--blanc);
  border:2px solid var(--encre);border-radius:4px;
  box-shadow:10px 10px 0 var(--encre);
  margin:0 10px 10px 0;
}
.fiche-haut{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between;
  padding:14px clamp(20px,3vw,32px);
  background:var(--encre);color:var(--clair);font-weight:600;font-size:1rem;
}
.fiche-haut b{color:#fff;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;}
.fiche-corps{padding:clamp(22px,3.4vw,34px);}
.fiche-rangee{display:grid;gap:0 22px;}
@media (min-width:560px){ .fiche-rangee{grid-template-columns:1fr 1fr;} }

.champ{position:relative;margin-bottom:22px;}
.champ label{display:block;margin-bottom:8px;font-weight:700;font-size:1.05rem;}
.champ label span{color:var(--rouge);}
.champ label em{font-style:normal;font-weight:500;color:var(--gris);}
.champ input,.champ textarea{
  display:block;width:100%;
  padding:12px 14px;
  background:var(--blanc);
  border:2px solid var(--encre);border-radius:4px;
  font:inherit;font-size:1.05rem;line-height:1.45;color:var(--encre);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.champ textarea{resize:vertical;min-height:132px;}
.champ input::placeholder,.champ textarea::placeholder{color:var(--gris);opacity:.75;}
.champ input:focus,.champ textarea:focus{
  outline:none;border-color:var(--bleu);box-shadow:4px 4px 0 var(--jaune);
}
.champ-aide{
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;
  margin-top:8px;font-size:.95rem;color:var(--gris);
}

/* Le champ piège : hors écran, jamais annoncé, jamais atteint
   au clavier. Il ne doit pas être display:none — certains
   robots ignorent les champs masqués de cette façon. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.msg{
  display:flex;gap:12px;align-items:flex-start;
  margin:0 0 22px;padding:14px 16px;
  border:2px solid;border-radius:4px;
  font-size:1.05rem;font-weight:600;line-height:1.45;
}
.msg svg{flex:0 0 auto;margin-top:3px;}
.msg-ok{background:#DDF3E6;border-color:var(--vert);color:#0E4F2B;}
.msg-ko{background:#FBE1DE;border-color:var(--rouge);color:#8E1A12;}

.fiche-conf{margin-top:20px;font-size:.95rem;line-height:1.55;color:var(--gris);}


/* ============================================================
   16 · CLÔTURE & PIED DE PAGE
   ============================================================ */
.cloture{
  padding:clamp(64px,8vw,104px) 24px;
  color:#fff;
  background-color:var(--bleu);
  background-image:var(--grille);
  background-size:36px 36px;
}
.cloture .conteneur{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:32px 64px;
}
.cloture-titre{display:flex;flex-direction:column;align-items:flex-start;gap:22px;flex:1 1 420px;min-width:0;}
.cloture h2{
  font-size:clamp(2.3rem,6vw,4.75rem);
  font-weight:800;line-height:.97;letter-spacing:-.035em;
}
.cloture-suite{display:flex;flex-direction:column;align-items:flex-start;gap:24px;flex:0 1 26rem;}
.cloture-suite p{font-size:1.3rem;line-height:1.45;color:#E6ECFA;}

.pied{padding:clamp(54px,6vw,84px) 24px 0;background:var(--encre);color:var(--clair);font-size:1rem;overflow:hidden;}
.pied a{color:var(--clair);text-decoration:none;}
.pied a:hover{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}
.pied-grille{display:grid;gap:clamp(30px,4vw,48px);}
@media (min-width:760px){ .pied-grille{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));} }
.pied-marque{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.pied-marque .logo:hover{text-decoration:none;color:#fff;}
.pied-marque p{max-width:34ch;}
.pied-ei{
  display:inline-block;padding:4px 11px;border-radius:3px;
  background:var(--jaune);color:var(--encre);font-weight:700;
  box-shadow:2px 3px 0 #000;transform:rotate(-1.5deg);
}
.pied h3{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:#fff;margin-bottom:14px;}
.pied ul{list-style:none;margin:0;padding:0;}
.pied li{margin-bottom:9px;}

/* Les mentions obligatoires, rangées en cases nommées. */
.pied-legal{
  margin-top:clamp(40px,5vw,64px);
  border-top:2px solid rgba(255,255,255,.22);
  display:grid;gap:0;
}
@media (min-width:700px){ .pied-legal{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1040px){ .pied-legal{grid-template-columns:repeat(4,minmax(0,1fr));} }
.pied-legal > div{padding:18px 20px 18px 0;border-bottom:2px solid rgba(255,255,255,.22);}
@media (min-width:700px){
  .pied-legal > div{border-right:2px solid rgba(255,255,255,.22);padding-left:20px;}
  .pied-legal > div:first-child{padding-left:0;}
}
.pied-legal dt{font-weight:700;color:#fff;margin-bottom:6px;}
.pied-legal dd{font-size:.95rem;line-height:1.6;overflow-wrap:anywhere;}
.pied-bas{
  display:flex;flex-wrap:wrap;gap:8px 32px;align-items:center;justify-content:space-between;
  padding:24px 0 28px;
}
.pied-bas a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;}

/* Le mot-symbole en pied : la dernière chose que voit le visiteur. */
.pied-mot{
  margin:0 -24px;padding:0;line-height:.74;user-select:none;
  font-weight:800;font-size:clamp(76px,19.5vw,290px);letter-spacing:-.035em;
  color:#1B2547;text-align:center;
  margin-bottom:-.16em;
}


/* ============================================================
   17 · DIVERS
   ============================================================ */

/* Retour en haut : un carré jaune sur son ombre. */
.haut{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(18px,3vw,30px);z-index:80;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--jaune);color:var(--encre);border:0;border-radius:4px;cursor:pointer;
  box-shadow:4px 4px 0 var(--encre);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .2s ease, transform .15s ease, box-shadow .12s ease;
}
.haut.vu{opacity:1;transform:none;pointer-events:auto;}
.haut.vu:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--encre);}

/* Le message d'ouverture (Admin → Paramètres) : une feuille blanche
   sur son ombre jaune. */
.notice{
  position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(18,26,51,.72);
  opacity:0;visibility:hidden;transition:opacity .2s ease, visibility 0s linear .2s;
}
.notice.ouvert{opacity:1;visibility:visible;transition-delay:0s;}
.notice-boite{
  position:relative;width:min(540px,calc(100% - 12px));max-height:86vh;overflow-y:auto;
  background:var(--blanc);border:2px solid var(--encre);border-radius:4px;
  box-shadow:10px 10px 0 var(--jaune);
}
.notice-haut{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px 10px 20px;background:var(--encre);color:#fff;font-weight:700;
}
.notice-fermer{
  background:none;border:0;cursor:pointer;color:#fff;border-radius:3px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
}
.notice-fermer:hover{background:var(--jaune);color:var(--encre);}
.notice-corps{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:26px 24px 28px;}
.notice-corps h2{font-size:clamp(1.5rem,4vw,2rem);line-height:1.05;}
.notice-corps p{color:var(--gris);}

/* ---------- Téléphone ---------- */
@media (max-width:599px){
  body{font-size:1.0625rem;}
  .bloc,.services,.contact,.cloture,.accueil,.sommaire{padding-left:18px;padding-right:18px;}
  .pied{padding-left:18px;padding-right:18px;}
  .pied-mot{margin:0 -18px -.16em;}
  .accueil .conteneur{gap:56px;padding-top:calc(var(--h-tete) + 34px);}
  .actions{width:100%;}
  .actions .bouton{width:100%;justify-content:center;}
  .accroche-bas p{font-size:1.15rem;}
  .etiquette{max-width:none;width:100%;}
  .capture{box-shadow:7px 7px 0 var(--jaune);margin-right:7px;}
  .projet.inverse .capture{box-shadow:-7px 7px 0 var(--jaune);margin-right:0;margin-left:7px;}
  /* min-height + aspect-ratio imposeraient une largeur minimale plus grande
     que l'écran : sur téléphone, le cadre vedette reprend le format courant. */
  .projet.vedette .capture{box-shadow:7px 7px 0 var(--jaune);margin-right:7px;aspect-ratio:16 / 10;min-height:0;}
  .texte-bas{flex-direction:column;align-items:stretch;}
  .texte-bas .cote{flex:none;}
  .cloture-suite .bouton,.nomen-aside .bouton{width:100%;justify-content:center;}
  .coordonnees .bouton-encre{font-size:1.05rem;padding:16px 18px;}
  .telephone{font-size:1.6rem;}
  .fiche{box-shadow:6px 6px 0 var(--encre);margin:0 6px 6px 0;}
  .nomen-nom em{display:table;margin:8px 0 0;}
  .faq summary{padding-right:48px;}
  .faq-corps p{padding-right:0;}
}

/* ============================================================
   TEMPLATES DE SITES — trois cadres côte à côte
   ------------------------------------------------------------
   Le même cadre que les réalisations (bord bleu, ombre jaune,
   posé de travers), en plus petit, avec le prix en étiquette
   jaune penchée. Sans image : la planche typographique.
   ============================================================ */
.tpl-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:52px 44px;}
.tpl-fiche{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;}
.tpl-fiche .capture{flex:none;width:calc(100% - 12px);margin-bottom:14px;}
.tpl-fiche:nth-child(even) .capture{transform:rotate(-1deg);}
.tpl-fiche .capture-typo b{font-size:clamp(1.4rem,2.6vw,2rem);}
.tpl-prix{
  position:absolute;top:12px;right:12px;
  padding:5px 12px;border-radius:3px;
  background:var(--jaune);color:var(--encre);
  font-weight:800;font-size:1.1rem;line-height:1.2;font-variant-numeric:tabular-nums;
  box-shadow:3px 4px 0 var(--encre);transform:rotate(2deg);
}
.tpl-fiche h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;overflow-wrap:anywhere;}
.tpl-fiche > p:not(.projet-meta){color:var(--gris);}
.tpl-fiche .lien{color:var(--bleu-fonce);font-weight:700;}


/* ---------- Mouvement réduit : tout s'arrête, rien ne disparaît ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Impression ---------- */
@media print{
  .barre,.sommaire,.haut,.notice,.jauge,.atelier,.etiquettes{display:none !important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .accueil,.services,.contact,.cloture,.pied{background:#fff !important;color:#000 !important;}
  .accueil .conteneur{padding-top:0;gap:24pt;}
  .bloc,.services,.contact,.cloture{padding:18pt 0;}
  .accroche-bas p,.service p,.services-tete > p,.cloture-suite p,.pied,.pied a,.reglement p{color:#000 !important;}
  .capture,.fiche,.avis-c,.nomen-aside,.fiche-id{box-shadow:none !important;transform:none !important;}
  /* À l'impression, tous les replis doivent être ouverts. */
  .nomen-l .nomen-pan,.nomen-pan{grid-template-rows:1fr !important;}
  .faq-corps{grid-template-rows:1fr !important;}
  .faq details,.projet,.service{break-inside:avoid;}
  .pied-mot{display:none;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;}
}