/*
Theme Name: Magellan BTP
Theme URI: https://www.magellan-batiment.com/
Author: The DivisionCorp
Description: Thème sur mesure pour Magellan BTP, entreprise de second œuvre
  intérieur en Île-de-France. Une seule famille typographique en largeur
  variable, grille à bord gauche unique, codes de lot à deux lettres,
  repère de couches. Embarque le type de contenu « opération » et ses
  champs : aucune extension requise.
Version: 1.3.2
Requires at least: 6.5
Requires PHP: 8.1
License: Propriétaire, usage réservé à Magellan BTP
Text Domain: magellan
*/

/* ═══════════════════════════════════════════════════════════════
   La feuille ci-dessous est reprise telle quelle de la maquette
   validée (magellan-btp-v2-1.html). Les seuls ajouts sont en fin
   de fichier, sous « ADAPTATIONS WORDPRESS » : ils habillent les
   éléments que WordPress produit lui-même et qui n'existaient pas
   dans la maquette statique.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── 1. JETONS ─────────── */
:root{
  color-scheme: light;

  --papier:    #F1EFE9;
  --papier-2:  #E7E4DC;
  --papier-3:  #DAD6CB;
  --encre:     #191814;
  --encre-2:   #4A4741;
  --encre-3:   #7A766C;
  --filet:     #CFCABD;
  --filet-2:   #B2AC9C;
  --brique:    #8E3B23;
  --brique-cl: #C2705A;
  --brique-bg: #EDE0D9;
  --ardoise:   #3C4A4E;
  --ardoise-2: #6B7A7E;

  --f: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* cadre vidéo de l'accroche : une ligne pour changer le format */
  --broll-ratio: 4 / 5;
  --broll-l: 340px;

  --gout: clamp(18px, 4vw, 56px);
  --max: 1360px;
}

/* ─────────── 2. SOCLE ─────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--papier); color:var(--encre);
  font-family:var(--f);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:16px; line-height:1.58;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--brique); outline-offset:3px }
.saut{ position:absolute; left:8px; top:-60px; z-index:300; background:var(--encre);
  color:var(--papier); padding:11px 18px; font-size:13px; font-variation-settings:'wght' 600; transition:top .15s }
.saut:focus{ top:8px }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important } }

/* ─────────── 3. GRILLE DE PLANCHE ─────────── */
/* Colonne unique. Le texte part de la gouttière, sans retrait :
   en-tête, contenu et pied sont alignés sur le même bord gauche. */
.planche{ max-width:var(--max); margin:0 auto; padding-inline:var(--gout) }
.planche__corps{ min-width:0 }

/* ─────────── 4. TYPOGRAPHIE ─────────── */
/* étiquette : capitales légèrement élargies, précédée d'une barre pleine */
.et{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10.5px; line-height:1.3; letter-spacing:.085em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 600;
  color:var(--ardoise);
}
.et::before{ content:''; width:16px; height:2px; background:var(--brique); flex-shrink:0 }
.et--nu::before{ display:none }
.et--cl{ color:var(--papier-3) }
.et--cl::before{ background:var(--brique-cl) }

h1,h2,h3,h4{ font-weight:400; letter-spacing:-.022em }
.titre{
  font-size:clamp(36px,5.6vw,74px); line-height:.96;
  font-variation-settings:'wdth' 84,'wght' 600;
  text-wrap:balance;
}
.titre em{ font-style:normal; color:var(--brique) }
.titre-2{ font-size:clamp(25px,3.1vw,40px); line-height:1.04; text-wrap:balance;
  font-variation-settings:'wdth' 88,'wght' 600 }
.titre-3{ font-size:clamp(19px,1.9vw,23px); line-height:1.14; text-wrap:balance;
  font-variation-settings:'wdth' 94,'wght' 600; letter-spacing:-.016em }

.chapo{ font-size:clamp(17px,1.35vw,20.5px); line-height:1.52; color:var(--encre-2);
  font-variation-settings:'wdth' 100,'wght' 400; max-width:56ch }
p{ max-width:66ch }
.txt{ color:var(--encre-2); margin-bottom:1em }
.txt:last-child{ margin-bottom:0 }

.nb{ font-variant-numeric:tabular-nums }

/* ─────────── 5. REPÈRE DE COUCHES ─────────── */
/* trois barres d'épaisseurs décroissantes : la coupe d'une cloison */
.repere{ display:block; flex-shrink:0 }
.repere rect{ fill:currentColor }

/* ─────────── 6. FILETS ─────────── */
.fil{ border:0; border-top:1px solid var(--filet) }
.fil-2{ border:0; border-top:3px solid var(--encre) }
.bloc{ width:44px; height:10px; background:var(--brique) }

/* ─────────── 7. ACTIONS ─────────── */
/* bloc plein, sans bordure ni flèche */
.act{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px; background:var(--encre); color:var(--papier);
  font-size:12.5px; letter-spacing:.075em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 600;
  cursor:pointer; border:0; transition:background .17s;
}
.act:hover{ background:var(--brique) }
.act--sec{ background:var(--ardoise) }
.act--sec:hover{ background:var(--encre) }
.act--cl{ background:var(--papier); color:var(--encre) }
.act--cl:hover{ background:var(--brique); color:var(--papier) }

/* lien d'action : filet épais qui s'épaissit */
.lien{
  display:inline-block; padding-bottom:3px;
  box-shadow:inset 0 -3px 0 var(--filet-2);
  font-size:13px; letter-spacing:.055em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 600;
  transition:box-shadow .17s, color .17s;
}
.lien:hover{ box-shadow:inset 0 -7px 0 var(--brique-bg); color:var(--brique) }
.lien--cl{ box-shadow:inset 0 -3px 0 rgba(241,239,233,.4); color:var(--papier) }
.lien--cl:hover{ box-shadow:inset 0 -7px 0 rgba(194,112,90,.45); color:var(--papier) }

.actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }

/* code de lot à deux lettres */
.code{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0;
  background:var(--ardoise); color:var(--papier);
  font-size:11.5px; letter-spacing:.04em;
  font-variation-settings:'wdth' 100,'wght' 700;
}
.code--b{ background:var(--brique) }
.code--sm{ width:26px; height:26px; font-size:10.5px;
  font-variation-settings:'wdth' 98,'wght' 700 }

/* ─────────── 8. EN-TÊTE ─────────── */
.tete{ position:sticky; top:0; z-index:100; background:var(--papier);
  border-bottom:3px solid var(--encre) }
.tete__in{ max-width:var(--max); margin:0 auto; padding-inline:var(--gout);
  height:78px; display:flex; align-items:center; gap:26px }
.logo{ display:flex; align-items:center; gap:13px; flex-shrink:0; color:var(--brique) }
/* marque déposée par le client dans Personnaliser : hauteur contrainte,
   largeur libre, pour accepter n'importe quelles proportions */
.logo__m{ display:block; flex-shrink:0 }
.logo__m img{ display:block; height:32px; width:auto; max-width:132px; object-fit:contain }
@media (max-width:700px){ .logo__m img{ height:26px } }
.logo__n{ font-size:21px; line-height:1; letter-spacing:-.03em;
  font-variation-settings:'wdth' 80,'wght' 700; text-transform:uppercase; color:var(--encre) }
.logo__s{ font-size:9px; line-height:1.2; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 600; color:var(--encre-3);
  padding-left:11px; border-left:1px solid var(--filet-2) }
.menu{ display:flex; gap:4px; margin-left:auto }
.menu a{ font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 600; color:var(--encre-2);
  padding:9px 13px; transition:background .15s, color .15s }
.menu a:hover{ background:var(--papier-2); color:var(--encre) }
.menu a[aria-current="page"]{ background:var(--encre); color:var(--papier) }
.tete__tel{ display:flex; flex-direction:column; gap:3px; white-space:nowrap;
  padding-left:22px; border-left:1px solid var(--filet) }
.tete__tel a{ font-size:15px; letter-spacing:-.01em;
  font-variation-settings:'wdth' 92,'wght' 700; font-variant-numeric:tabular-nums }
.tete__tel a:hover{ color:var(--brique) }
.burger{ display:none; margin-left:auto; padding:10px 14px; background:var(--encre);
  color:var(--papier); border:0; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 600; cursor:pointer }
@media (max-width:1080px){ .menu a{ padding:9px 9px } .tete__tel span{ display:none } }
@media (max-width:900px){
  .tete__in{ height:66px; flex-wrap:wrap }
  .burger{ display:block; order:2 }
  .tete__tel{ order:3; border:0; padding:0; margin-left:14px }
  .menu{ order:4; width:100%; margin-left:0; flex-direction:column; gap:0;
    border-top:1px solid var(--filet); padding-bottom:8px }
  .menu[data-ouvert="false"]{ display:none }
  .menu a{ padding:13px 0; border-bottom:1px solid var(--filet) }
}

/* ─────────── 9. BANDES ─────────── */
.bande{ padding:clamp(48px,6.5vw,92px) 0 }
.bande--t{ background:var(--papier-2) }
.bande--e{ background:var(--encre); color:var(--papier) }
.bande--e .txt,.bande--e .chapo{ color:var(--papier-3) }

/* tête de section : code dans la marge, titre dans le corps */
.sect{ display:contents }
.sect__h{ padding-top:16px; border-top:3px solid var(--encre); margin-bottom:clamp(26px,3vw,40px) }
.bande--e .sect__h{ border-top-color:var(--brique-cl) }

/* ─────────── 10. ACCROCHE ─────────── */
.accroche{ padding:clamp(44px,6vw,86px) 0 clamp(34px,4vw,56px) }
.accroche__g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--broll-l));
  gap:clamp(24px,4vw,64px); align-items:start }
.accroche h1{ margin:20px 0 26px; max-width:17ch }

/* cadre vidéo B-roll : le lecteur et le gabarit d'attente partagent
   exactement la même boîte, pour que la substitution ne décale rien */
/* conteneur du cadre : il porte l'élément de l'aperçu du Personnalisateur,
   et reste un simple bloc pour ne rien changer à la grille */
.accroche__media{ display:block; min-width:0 }
@media (max-width:900px){ .accroche__media{ max-width:360px } }
.broll{ width:100%; aspect-ratio:var(--broll-ratio); display:block;
  object-fit:cover; background:var(--papier-2); margin:0 }
video.broll{ border:3px solid var(--encre) }
.broll--vide{ border:2px dashed var(--filet-2);
  display:flex; align-items:center; justify-content:center; text-align:center;
  position:relative; overflow:hidden }
/* diagonale de cadrage, comme sur un gabarit de maquette */
.broll--vide::before{ content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--filet) calc(50% - 1px),
      var(--filet) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--filet) calc(50% - 1px),
      var(--filet) calc(50% + 1px), transparent calc(50% + 1px)) }
.broll--vide figcaption{ position:relative; z-index:1; background:var(--papier);
  padding:16px 20px; border:1px solid var(--filet-2) }
.broll--vide b{ display:block; margin:9px 0 7px; font-size:17px; letter-spacing:-.02em;
  font-variation-settings:'wdth' 90,'wght' 600 }
.broll__spec{ display:block; font-size:11px; line-height:1.6; letter-spacing:.05em;
  text-transform:uppercase; font-variation-settings:'wdth' 106,'wght' 500;
  color:var(--encre-3) }
@media (max-width:900px){
  .accroche__g{ grid-template-columns:1fr; gap:30px }
}
/* animations desactivees : l'image d'attente prend la place de la video,
   sinon le cadre laisserait un trou dans la grille de l'accroche */
.broll--fixe{ display:none }
@media (prefers-reduced-motion:reduce){
  video.broll{ display:none }
  .broll--fixe{ display:block; border:3px solid var(--encre) }
}
.accroche .chapo{ margin-bottom:34px }
.accroche__pied{ margin-top:46px; padding-top:18px; border-top:3px solid var(--encre);
  display:flex; gap:clamp(22px,4vw,64px); flex-wrap:wrap }
.accroche__pied div{ max-width:none }
.accroche__pied b{ display:block; font-size:clamp(30px,3.4vw,44px); line-height:1;
  letter-spacing:-.035em; font-variation-settings:'wdth' 80,'wght' 700;
  font-variant-numeric:tabular-nums; margin-bottom:7px }

/* fiche d'identité : plus de cartouche encadré, un tableau de marge */
.identite{ border-top:3px solid var(--encre) }
.identite > div{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px;
  padding:13px 0; border-bottom:1px solid var(--filet) }
.identite dt{ font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 600; color:var(--ardoise-2); padding-top:3px }
.identite dd{ font-size:14.5px; line-height:1.5; color:var(--encre-2) }
.identite dd a{ box-shadow:inset 0 -2px 0 var(--filet-2) }
.identite dd a:hover{ color:var(--brique); box-shadow:inset 0 -2px 0 var(--brique) }
@media (max-width:520px){ .identite > div{ grid-template-columns:1fr; gap:5px } }

/* ─────────── 11. DONNEURS D'ORDRE ─────────── */
.clients{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border-top:3px solid var(--encre) }
.client{ padding:19px 16px 19px 0; border-bottom:1px solid var(--filet);
  display:flex; flex-direction:column; gap:6px; transition:background .15s }
.client:hover{ background:var(--papier-3) }
.bande--t .client:hover{ background:var(--papier) }

/* logo du donneur d'ordre : hauteur fixe pour que la grille reste alignée
   quelles que soient les proportions du fichier fourni par le client */
.client__l{ display:flex; align-items:center; height:30px; margin-bottom:2px }
.client__l img{ max-height:30px; max-width:132px; width:auto; height:auto;
  object-fit:contain; object-position:left center }
.client:has(.client__l) b{ margin-top:2px }

.client b{ font-size:15.5px; line-height:1.16; letter-spacing:-.018em;
  font-variation-settings:'wdth' 92,'wght' 600 }
.client__v{ font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  font-variation-settings:'wdth' 108,'wght' 500; color:var(--encre-3) }

/* ─────────── 12. LOTS ─────────── */
.lots{ border-top:3px solid var(--encre) }
.lot{ display:grid; grid-template-columns:30px minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(14px,2.6vw,38px); align-items:start;
  padding:24px 0; border-bottom:1px solid var(--filet); transition:background .15s }
a.lot:hover{ background:var(--papier-3) }
.bande--t a.lot:hover{ background:var(--papier) }
a.lot:hover .lot__t{ color:var(--brique) }
.lot__t{ font-size:19.5px; line-height:1.15; letter-spacing:-.02em;
  font-variation-settings:'wdth' 92,'wght' 600; transition:color .15s }
.lot__d{ font-size:14.5px; color:var(--encre-2); line-height:1.55; margin-bottom:11px }
.mots{ display:flex; flex-wrap:wrap; gap:0 }
.mots span{ font-size:10.5px; letter-spacing:.055em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 500; color:var(--ardoise);
  padding:4px 10px 4px 0; margin-right:10px; border-right:1px solid var(--filet-2) }
.mots span:last-child{ border-right:0; margin-right:0 }
@media (max-width:760px){ .lot{ grid-template-columns:30px 1fr; gap:12px }
  .lot__corps{ grid-column:2 } }

/* engagements : pas de numérotation, le titre porte seul */
.engs{ border-top:3px solid var(--encre) }
.engs > div{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);
  gap:clamp(14px,2.6vw,40px); padding:23px 0; border-bottom:1px solid var(--filet) }
.engs h3{ font-size:19.5px; line-height:1.14; letter-spacing:-.02em;
  font-variation-settings:'wdth' 92,'wght' 600 }
.engs p{ font-size:14.5px; color:var(--encre-2); line-height:1.55 }
@media (max-width:760px){ .engs > div{ grid-template-columns:1fr; gap:7px } }

/* ─────────── 13. INDEX DES OPÉRATIONS ─────────── */
.tri{ display:flex; gap:clamp(14px,2.6vw,34px); flex-wrap:wrap;
  padding-bottom:16px; border-bottom:3px solid var(--encre) }
.tri__g{ display:flex; align-items:center; gap:0; flex-wrap:wrap }
.tri__g > .et{ margin-right:12px }
.t{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 600; color:var(--encre-3);
  padding:8px 13px; background:transparent; border:0; cursor:pointer; transition:.15s }
.t:hover{ color:var(--encre); background:var(--papier-3) }
.t[aria-pressed="true"]{ background:var(--encre); color:var(--papier) }
.compte{ font-size:12.5px; color:var(--encre-3); padding:15px 0 0;
  font-variant-numeric:tabular-nums }
.compte b{ color:var(--brique); font-variation-settings:'wght' 700 }

.index{ width:100%; border-collapse:collapse; text-align:left }
.index th{ font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 600; color:var(--ardoise-2);
  padding:14px 16px 12px 0; border-bottom:1px solid var(--filet-2) }
.index td{ padding:18px 16px 18px 0; border-bottom:1px solid var(--filet); vertical-align:top }
.index tbody tr{ transition:background .14s }
.index tbody tr:hover{ background:var(--papier-3) }
.bande--t .index tbody tr:hover{ background:var(--papier) }
.index tbody tr:hover .o-t{ color:var(--brique) }
.o-c{ font-size:12.5px; line-height:1.3; letter-spacing:.045em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 600; color:var(--ardoise); white-space:nowrap }
/* logo dans la ligne d'index : discret, il complète le nom sans le remplacer.
   Le nom reste toujours lisible, pour le balayage en diagonale et pour les
   moteurs. Si le SVG manque, la zone disparaît sans laisser de trou. */
.o-logo{ display:block; margin-bottom:8px; max-width:120px }
.o-logo.sansLogo{ display:none }
.o-logo img{ max-height:26px; max-width:100%; width:auto;
  object-fit:contain; object-position:left center;
  filter:grayscale(1); opacity:.75; transition:.16s }
.index tbody tr:hover .o-logo img{ filter:none; opacity:1 }
.o-t{ display:block; font-size:17.5px; line-height:1.18; letter-spacing:-.019em;
  font-variation-settings:'wdth' 92,'wght' 600; margin-bottom:5px; transition:color .15s }
.o-l{ display:flex; gap:4px; flex-wrap:wrap }
/* appel de fiche, visible en permanence */
.o-fiche{ display:inline-block; font-size:10.5px; letter-spacing:.075em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 600; color:var(--brique);
  box-shadow:inset 0 -2px 0 var(--brique-bg); padding-bottom:2px; transition:box-shadow .15s }
.index tbody tr:hover .o-fiche{ box-shadow:inset 0 -6px 0 var(--brique-bg) }
.o-loc{ font-size:14px; color:var(--encre-2); white-space:nowrap }
.o-hors{ display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  font-variation-settings:'wdth' 108,'wght' 600; color:var(--brique); margin-top:5px }
.o-pub{ display:inline-block; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  font-variation-settings:'wdth' 108,'wght' 600; color:var(--ardoise);
  border-left:3px solid var(--ardoise); padding-left:7px; margin-top:8px }
/* STATUT : étiquette pleine, en gras, marquée d'une barre épaisse.
   Volontairement d'une tout autre nature que les codes de lot, qui sont
   des carrés-lettres : ici un bandeau de texte, là des blocs. */
.etat{ display:inline-block; white-space:nowrap; padding:5px 11px 5px 9px;
  border-left:5px solid currentColor;
  font-size:11.5px; letter-spacing:.075em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 700 }
.etat--c{ color:var(--brique); background:var(--brique-bg) }
.etat--l{ color:var(--encre-3); background:transparent;
  border-left-color:var(--filet-2); font-variation-settings:'wdth' 104,'wght' 600 }
@media (max-width:820px){
  .index thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .index tr{ display:block; border-bottom:1px solid var(--filet); padding:20px 0 }
  .index tbody tr:hover{ background:transparent }
  .index td{ display:block; border:0; padding:0 0 9px }
  .index td:last-child{ padding-bottom:0 }
}

/* ─────────── 14. PAGE DES LOTS ─────────── */
.expose{ border-top:3px solid var(--encre); padding:clamp(30px,4vw,52px) 0 }
.expose:last-of-type{ border-bottom:3px solid var(--encre) }
.expose__g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(20px,3.5vw,52px) }
.liste{ border-top:1px solid var(--filet) }
.liste li{ list-style:none; padding:11px 0 11px 20px; border-bottom:1px solid var(--filet);
  font-size:14.5px; color:var(--encre-2); position:relative; line-height:1.52 }
.liste li::before{ content:''; position:absolute; left:0; top:19px;
  width:10px; height:3px; background:var(--brique) }
@media (max-width:820px){ .expose__g{ grid-template-columns:1fr } }

/* ─────────── 15. FICHE OPÉRATION ─────────── */
.fil-ariane{ display:flex; gap:9px; flex-wrap:wrap; padding:20px 0;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 500; color:var(--encre-3) }
.fil-ariane a:hover{ color:var(--brique) }
.fil-ariane [aria-current]{ color:var(--encre) }
.op-tete{ padding:clamp(14px,2.4vw,28px) 0 clamp(30px,4vw,48px); border-bottom:3px solid var(--encre) }
.op-tete h1{ font-size:clamp(28px,4.4vw,56px); line-height:.99; margin-bottom:20px; max-width:18ch;
  text-wrap:balance;
  font-variation-settings:'wdth' 84,'wght' 600 }
.op-tete #op-ref{ margin-bottom:12px }
/* logo en tête de fiche : plus grand, c'est là qu'il porte la preuve */
.op-logo{ display:block; margin-bottom:12px; max-width:200px }
.op-logo.sansLogo{ display:none }
.op-logo img{ max-height:52px; max-width:100%; width:auto; object-fit:contain;
  object-position:left center }
.op-tete__c{ font-size:12.5px; letter-spacing:.075em; text-transform:uppercase;
  font-variation-settings:'wdth' 104,'wght' 600; color:var(--ardoise); margin-bottom:14px }
.op-badges{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.op-corps{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(250px,.85fr);
  gap:clamp(28px,4.5vw,64px); padding:clamp(32px,4.5vw,56px) 0 }
.emplacement{ border:2px dashed var(--filet-2); background:var(--papier-2);
  padding:24px; margin:0 0 30px; text-align:center }
.emplacement__g{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.emplacement__g span{ display:block; aspect-ratio:4/3; background:var(--papier-3);
  border:1px solid var(--filet-2); position:relative }
.emplacement__g span::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top right, transparent calc(50% - 1px),
    var(--filet-2) calc(50% - 1px), var(--filet-2) calc(50% + 1px), transparent calc(50% + 1px)) }
.emplacement code{ font-size:12.5px; font-variation-settings:'wdth' 90,'wght' 600;
  background:var(--papier-3); padding:1px 5px }
@media (max-width:560px){ .emplacement__g{ grid-template-columns:1fr 1fr } }
.emplacement p{ max-width:46ch; margin:9px auto 0; font-size:13.5px; color:var(--encre-3); line-height:1.55 }
.op-nav{ display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:22px 0; border-top:3px solid var(--encre); flex-wrap:wrap }
.op-nav a{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  font-variation-settings:'wdth' 106,'wght' 600; color:var(--ardoise) }
.op-nav a:hover{ color:var(--brique) }
.op-nav em{ display:block; font-style:normal; font-size:15.5px; letter-spacing:-.018em;
  text-transform:none; font-variation-settings:'wdth' 92,'wght' 600; color:var(--encre); margin-top:5px }
@media (max-width:820px){ .op-corps{ grid-template-columns:1fr } }

/* ─────────── 16. FORMULAIRES ─────────── */
.form{ background:var(--papier-2); border-top:3px solid var(--encre); padding:clamp(22px,3.2vw,34px) }
.bande--t .form{ background:var(--papier) }
fieldset{ border:0 }
.form legend{ font-size:21px; letter-spacing:-.02em; font-variation-settings:'wdth' 90,'wght' 600;
  padding:0 0 16px; margin-bottom:20px; border-bottom:1px solid var(--filet-2); width:100% }
.fr{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:640px){ .fr{ grid-template-columns:1fr } }
.fg{ margin-bottom:16px; display:flex; flex-direction:column; gap:7px }
.fg label{ font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 600; color:var(--ardoise-2) }
.fg label i{ font-style:normal; color:var(--brique) }
.fg input,.fg select,.fg textarea{
  background:var(--papier); border:0; border-bottom:2px solid var(--filet-2);
  padding:11px 0; font-size:15.5px; width:100%; transition:border-color .15s }
.bande--t .fg input,.bande--t .fg select,.bande--t .fg textarea{ background:var(--papier-2) }
.fg input:focus,.fg select:focus,.fg textarea:focus{ border-bottom-color:var(--brique); outline-offset:2px }
.fg textarea{ resize:vertical; min-height:96px; line-height:1.55 }
.fg select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ardoise) 50%),linear-gradient(135deg,var(--ardoise) 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%, calc(100% - 8px) 55%;
  background-size:5px 5px; background-repeat:no-repeat }
.fg input[type=file]{ padding:9px 0; font-size:13px; cursor:pointer; border-bottom-style:dashed }
.aide{ font-size:12.5px; color:var(--encre-3); line-height:1.5 }
.accord{ display:flex; gap:12px; align-items:flex-start; padding:15px 0;
  border-top:1px solid var(--filet-2); border-bottom:1px solid var(--filet-2); margin:18px 0 }
.accord input{ width:17px; height:17px; flex-shrink:0; margin-top:3px; accent-color:var(--brique) }
.accord label{ font-size:13.5px; line-height:1.52; color:var(--encre-2) }
.accord label a{ box-shadow:inset 0 -2px 0 var(--filet-2) }
.accord label a:hover{ color:var(--brique); box-shadow:inset 0 -2px 0 var(--brique) }
.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form .act{ width:100%; justify-content:center }
.etape{ display:block; margin:26px 0 14px; padding-top:20px; border-top:1px solid var(--filet-2) }
.etape:first-of-type{ margin-top:0; padding-top:0; border-top:0 }

/* bloc d'appel en fin de page */
.appui{ background:var(--papier-2); border-top:3px solid var(--encre);
  padding:clamp(22px,3.2vw,34px) }
.bande--t .appui{ background:var(--papier) }
.appui__tel{ margin:16px 0 10px }
.appui__tel a{ font-size:clamp(26px,3vw,36px); line-height:1; letter-spacing:-.035em;
  font-variation-settings:'wdth' 80,'wght' 700; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -4px 0 var(--brique-bg); padding-bottom:3px; transition:box-shadow .16s }
.appui__tel a:hover{ box-shadow:inset 0 -10px 0 var(--brique-bg); color:var(--brique) }

/* ─────────── 17. CONTACT ─────────── */
.cgrid{ display:grid; grid-template-columns:minmax(260px,.82fr) minmax(0,1.3fr);
  gap:clamp(30px,4.5vw,64px); align-items:start }
.coord{ border-top:3px solid var(--encre) }
.coord > div{ padding:16px 0; border-bottom:1px solid var(--filet) }
.coord dt{ font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 600; color:var(--ardoise-2); margin-bottom:6px }
.coord dd{ font-size:16px; line-height:1.5 }
.coord dd a{ box-shadow:inset 0 -2px 0 var(--filet-2) }
.coord dd a:hover{ color:var(--brique); box-shadow:inset 0 -2px 0 var(--brique) }
@media (max-width:860px){ .cgrid{ grid-template-columns:1fr } }

/* ─────────── 18. APPEL ─────────── */
.appel{ display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px); align-items:start }
.appel h2{ margin:18px 0 16px }
.pieces{ border-top:1px solid rgba(241,239,233,.26); list-style:none; margin-top:14px }
.pieces li{ display:grid; grid-template-columns:30px 1fr; gap:14px; padding:12px 0;
  border-bottom:1px solid rgba(241,239,233,.26); font-size:14.5px; color:var(--papier-3) }
.pieces b{ font-variation-settings:'wdth' 104,'wght' 700; color:var(--brique-cl);
  font-size:11.5px; letter-spacing:.06em; padding-top:3px; font-variant-numeric:tabular-nums }
@media (max-width:820px){ .appel{ grid-template-columns:1fr } }

/* ─────────── 19. PIED ─────────── */
.pied{ background:var(--encre); color:var(--papier); padding:clamp(42px,5vw,66px) 0 24px }
.pied__g{ display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,.68fr));
  gap:clamp(22px,3.2vw,46px); padding-bottom:36px }
.pied__n{ display:flex; align-items:center; gap:13px; color:var(--brique-cl); margin-bottom:14px }
.pied__n span{ font-size:25px; line-height:1; letter-spacing:-.03em; text-transform:uppercase;
  font-variation-settings:'wdth' 80,'wght' 700; color:var(--papier) }
.pied address{ font-style:normal; font-size:14px; line-height:1.72; color:var(--papier-3) }
.pied address a{ box-shadow:inset 0 -2px 0 rgba(241,239,233,.3) }
.pied address a:hover{ color:var(--brique-cl); box-shadow:inset 0 -2px 0 var(--brique-cl) }
.pied h3{ font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 600; color:var(--brique-cl); margin-bottom:15px }
.pied ul{ list-style:none; display:flex; flex-direction:column; gap:10px }
.pied ul a{ font-size:14px; color:var(--papier-3) }
.pied ul a:hover{ color:var(--papier) }
.pied__b{ padding-top:20px; border-top:1px solid rgba(241,239,233,.26);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.05em; color:var(--papier-3) }
@media (max-width:880px){ .pied__g{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .pied__g{ grid-template-columns:1fr } }

/* ─────────── 20. DIVERS ─────────── */
.note{ border-left:10px solid var(--brique); background:var(--brique-bg);
  padding:16px 20px; font-size:14px; line-height:1.6; color:var(--encre-2); margin:24px 0 }
.note strong{ color:var(--encre); font-variation-settings:'wght' 700 }
.prose h2{ font-size:25px; margin:34px 0 13px; font-variation-settings:'wdth' 90,'wght' 600;
  letter-spacing:-.02em }
.prose p{ color:var(--encre-2); margin-bottom:1em }
.acompleter{ background:var(--brique-bg); color:var(--brique); font-size:11.5px;
  letter-spacing:.05em; font-variation-settings:'wdth' 104,'wght' 600; padding:2px 7px }


/* ═══════════════════════════════════════════════════════════════
   ADAPTATIONS WORDPRESS
   ═══════════════════════════════════════════════════════════════ */

/* barre d'administration : elle décale tout le site de 32 px */
body.admin-bar .tete{ top:32px }
@media (max-width:782px){ body.admin-bar .tete{ top:46px } }

/* menu généré par WordPress */
.menu ul{ list-style:none; display:flex; gap:4px; margin:0; padding:0 }
.menu li{ margin:0 }
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current-menu-ancestor > a{ background:var(--encre); color:var(--papier) }
@media (max-width:900px){ .menu ul{ flex-direction:column; gap:0; width:100% } }

/* contenu libre saisi dans l'éditeur de blocs */
.prose > *:first-child{ margin-top:0 }
.prose h3{ font-size:19px; margin:26px 0 10px;
  font-variation-settings:'wdth' 94,'wght' 600; letter-spacing:-.016em }
.prose ul,.prose ol{ margin:0 0 1em 20px; color:var(--encre-2) }
.prose li{ margin-bottom:.4em }
.prose a{ box-shadow:inset 0 -2px 0 var(--filet-2) }
.prose a:hover{ color:var(--brique); box-shadow:inset 0 -2px 0 var(--brique) }
.prose blockquote{ border-left:10px solid var(--brique); background:var(--brique-bg);
  padding:16px 20px; margin:24px 0 }
.prose img,.prose figure{ max-width:100%; height:auto; margin:24px 0 }
.prose figcaption{ font-size:12.5px; color:var(--encre-3); margin-top:8px }
.prose table{ width:100%; border-collapse:collapse; margin:24px 0 }
.prose th{ text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  font-variation-settings:'wdth' 110,'wght' 600; color:var(--ardoise-2);
  padding:12px 16px 10px 0; border-bottom:1px solid var(--filet-2) }
.prose td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--filet); vertical-align:top }
.alignwide{ max-width:none }
.wp-caption{ max-width:100% }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap }

/* galerie photo d'une fiche opération */
.galerie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px; margin:0 0 30px }
.galerie a{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--papier-2) }
.galerie img{ width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)) }
.galerie a:hover img{ transform:scale(1.04) }

/* pagination de l'index */
.pagination{ display:flex; gap:6px; flex-wrap:wrap; padding-top:26px }
.pagination .page-numbers{ padding:9px 14px; border:1px solid var(--filet-2);
  font-size:12.5px; letter-spacing:.04em;
  font-variation-settings:'wdth' 104,'wght' 600; color:var(--encre-2) }
.pagination .page-numbers:hover{ border-color:var(--encre); color:var(--encre) }
.pagination .current{ background:var(--encre); border-color:var(--encre); color:var(--papier) }

/* message affiché quand aucune opération ne correspond au filtre */
.vide{ padding:40px 0; border-bottom:1px solid var(--filet);
  font-size:15px; color:var(--encre-3) }

/* lecteur vidéo d'une fiche opération : même cadre que la galerie */
.video-op{ width:100%; display:block; background:var(--papier-2);
  border:3px solid var(--encre); aspect-ratio:16 / 9; object-fit:cover }
