/*
Theme Name: Projet Kadre
Theme URI: https://projetkadre.fr
Author: Refonte 2026
Description: Theme sur mesure pour Projet Kadre, maitrise d'oeuvre a Valence. Page d'accueil orientee prise de contact, realisations gerees depuis l'administration.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: projet-kadre
*/

/* ============================================================
   PROJET KADRÉ — maquette de refonte, v2
   Charte : Montserrat / bleu océan, marine, glacier, blanc
   ============================================================ */

:root{
  --marine:      #00244C;
  --marine-2:    #093461;
  --ocean:       #004D90;
  --ocean-clair: #0A68BE;
  --glacier:     #E5F1FB;
  --blanc:       #FFFFFF;

  --texte:       #1E3A5C;
  --texte-doux:  #4A6885;
  --trait:       #CBDDEE;
  --trait-sombre:rgba(229,241,251,.22);

  --police: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --marge: clamp(1.25rem, 5vw, 5rem);
  --max: 1180px;
  --rythme: clamp(4rem, 8vw, 7rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0; background:var(--blanc); color:var(--texte);
  font-family:var(--police); font-size:1rem; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-weight:600; line-height:1.15; letter-spacing:-.015em; margin:0; color:var(--marine); }
p{ margin:0 0 1.1em; max-width:64ch; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--ocean-clair); outline-offset:3px; border-radius:2px; }

.saut{ position:absolute; left:-9999px; background:var(--ocean); color:#fff; padding:.75rem 1.25rem; font-weight:600; z-index:200; }
.saut:focus{ left:.5rem; top:.5rem; }
.zone{ max-width:var(--max); margin-inline:auto; padding-inline:var(--marge); }

.titre-section{ font-size:clamp(1.65rem,3.4vw,2.4rem); margin-bottom:.5rem; }
.chapeau{ font-size:.98rem; color:var(--texte-doux); margin:0 0 1.5rem; max-width:58ch; }
.filet{ border:0; border-top:1px solid var(--trait); margin:0 0 2.5rem; }
.sombre .titre-section,.sombre h3,.sombre h4{ color:var(--blanc); }
.sombre .chapeau{ color:#A9C6E2; }
.sombre .filet{ border-color:var(--trait-sombre); }

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.92rem; font-weight:600; letter-spacing:-.005em;
  padding:.8rem 1.4rem; border:2px solid transparent; border-radius:3px;
  text-decoration:none; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .12s;
}
.btn:active{ transform:translateY(1px); }
.btn-primaire{ background:var(--ocean); color:var(--blanc); border-color:var(--ocean); }
.btn-primaire:hover{ background:var(--ocean-clair); border-color:var(--ocean-clair); }
.btn-clair{ background:var(--blanc); color:var(--marine); border-color:var(--blanc); }
.btn-clair:hover{ background:var(--glacier); border-color:var(--glacier); }
.btn-fantome{ background:transparent; color:var(--blanc); border-color:var(--trait-sombre); }
.btn-fantome:hover{ border-color:var(--blanc); }
.btn-petit{ padding:.5rem 1rem; font-size:.86rem; }

/* ---------------- Bandeau d'appel récurrent ---------------- */
.appel{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.75rem; margin-top:3rem; padding:1.4rem 0 0;
  border-top:1px solid var(--trait);
}
.appel p{ margin:0; font-weight:500; color:var(--marine); max-width:46ch; }
.sombre .appel{ border-color:var(--trait-sombre); }
.sombre .appel p{ color:var(--blanc); }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.entete{
  position:sticky; top:0; z-index:100;
  background:rgba(0,36,76,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trait-sombre); color:var(--blanc);
}
.entete-inner{ display:flex; align-items:center; gap:1.25rem; max-width:var(--max); margin-inline:auto; padding:.6rem var(--marge); }
.marque{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; color:var(--blanc); }
.marque svg{ width:26px; height:26px; flex:none; }
.marque b{ font-size:.98rem; font-weight:700; letter-spacing:-.01em; display:block; }
.marque i{ font-style:normal; font-size:.7rem; font-weight:400; color:#A9C6E2; letter-spacing:.02em; display:block; }
.nav{ display:flex; gap:1.35rem; }
.nav a{
  font-size:.86rem; font-weight:500; text-decoration:none; color:#D9E8F5;
  padding:.3rem 0; border-bottom:2px solid transparent; transition:border-color .18s,color .18s;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--blanc); }
@media (max-width:1040px){ .nav{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--blanc) 0%, var(--blanc) 38%, var(--glacier) 100%);
  color:var(--texte); padding:clamp(2.25rem,5vw,4rem) 0 0;
}
.hero-grille{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,77,144,.07) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(0,77,144,.07) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 25% 45%, #000 5%, transparent 72%);
  mask-image:radial-gradient(ellipse 85% 75% at 25% 45%, #000 5%, transparent 72%);
}
.hero .zone{ position:relative; }
.hero-cols{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; padding:clamp(1.5rem,3.5vw,3rem) 0 clamp(2rem,4vw,3.5rem); }
.hero-image{ display:block; width:100%; max-width:580px; margin-inline:auto; }
.hero-image img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; }
@media (max-width:900px){
  .hero-cols{ grid-template-columns:1fr; }
  .hero-image{ max-width:420px; }
}

/* Lockup de marque, repris de la bannière */
.lockup{ display:flex; align-items:center; gap:clamp(.85rem,2vw,1.4rem); }
.lockup-mark{ flex:none; width:clamp(56px,7vw,84px); height:clamp(56px,7vw,84px); color:var(--marine); }
.lockup-mark svg{ width:100%; height:100%; display:block; }
.lockup-mots b{
  display:block; font-size:clamp(1.55rem,3.6vw,2.55rem); font-weight:700;
  color:var(--marine); letter-spacing:-.025em; line-height:1;
}
.lockup-mots i{
  display:block; font-style:normal; margin-top:.45rem;
  font-size:clamp(.52rem,.95vw,.68rem); font-weight:600; color:var(--ocean);
  letter-spacing:.17em; text-transform:uppercase; line-height:1.4;
}
.equerre{ position:absolute; width:clamp(34px,5vw,58px); height:clamp(34px,5vw,58px); pointer-events:none; }
.equerre svg{ width:100%; height:100%; display:block; }
.equerre path{ fill:none; stroke:var(--ocean); stroke-width:3; }
.eq-hg{ top:0; left:0; } .eq-hd{ top:0; right:0; transform:scaleX(-1); }
.eq-bg{ bottom:0; left:0; transform:scaleY(-1); } .eq-bd{ bottom:0; right:0; transform:scale(-1); }
@media (max-width:620px){
  .equerre{ width:26px; height:26px; }
}
@media (prefers-reduced-motion: no-preference){
  .equerre path{ stroke-dasharray:120; stroke-dashoffset:120; animation:tracer .9s cubic-bezier(.2,.7,.3,1) forwards; }
  .eq-hg path{ animation-delay:.1s; } .eq-hd path{ animation-delay:.22s; }
  .eq-bg path{ animation-delay:.34s; } .eq-bd path{ animation-delay:.46s; }
  @keyframes tracer{ to{ stroke-dashoffset:0; } }
}

.hero h1{
  color:var(--marine); font-size:clamp(1.7rem,3.5vw,2.7rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.12; max-width:17ch; margin-bottom:1rem;
}
.slogan{
  font-size:clamp(1rem,1.7vw,1.2rem); font-weight:500; font-style:italic;
  color:var(--ocean); margin:1.6rem 0 1.5rem; max-width:36ch;
}
.hero-texte{ font-size:1rem; color:var(--texte-doux); max-width:46ch; margin-bottom:1.75rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.btn-contour{ background:transparent; color:var(--marine); border-color:var(--trait); }
.btn-contour:hover{ border-color:var(--ocean); color:var(--ocean); }
.tel-hero{ font-weight:600; font-size:1rem; text-decoration:none; color:var(--marine); border-bottom:2px solid var(--ocean); padding-bottom:2px; }

.bande-cartouche{ background:var(--marine); color:var(--blanc); }
.cartouche{ border-top:0; display:grid; grid-template-columns:repeat(4,1fr); }
.cartouche div{ padding:1rem 1.1rem 1.3rem; border-right:1px solid var(--trait-sombre); }
.cartouche div:last-child{ border-right:0; }
.cartouche dt{ font-size:.72rem; font-weight:500; color:#A9C6E2; margin-bottom:.25rem; }
.cartouche dd{ margin:0; font-size:.92rem; font-weight:600; line-height:1.3; }
@media (max-width:760px){
  .cartouche{ grid-template-columns:repeat(2,1fr); }
  .cartouche div:nth-child(2){ border-right:0; }
  .cartouche div:nth-child(-n+2){ border-bottom:1px solid var(--trait-sombre); }
}

/* ============================================================
   PROMESSE
   ============================================================ */
.promesse{ padding:var(--rythme) 0; }
.promesse-grille{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,5vw,4.5rem); align-items:start; }
@media (max-width:820px){ .promesse-grille{ grid-template-columns:1fr; } }
.accroche{ font-size:clamp(1.3rem,2.5vw,1.85rem); font-weight:600; line-height:1.3; letter-spacing:-.02em; color:var(--marine); max-width:22ch; }
.souligne{ box-shadow:inset 0 -.4em 0 var(--glacier); }

/* ============================================================
   PHASES
   ============================================================ */
.phases{ padding:var(--rythme) 0; background:var(--glacier); }
.frise{ margin-top:2rem; border-top:1px solid var(--trait); }
.phase{ border-bottom:1px solid var(--trait); }
.phase > summary{ display:grid; grid-template-columns:3rem 1fr auto; gap:1.15rem; align-items:center; padding:1.35rem .25rem; cursor:pointer; list-style:none; }
.phase > summary::-webkit-details-marker{ display:none; }
.phase > summary:hover .phase-titre{ color:var(--ocean); }
.phase-num{ font-size:1.5rem; font-weight:700; color:var(--trait); letter-spacing:-.03em; transition:color .2s; }
.phase[open] .phase-num{ color:var(--ocean); }
.phase-titre{ font-size:clamp(1.05rem,2vw,1.35rem); font-weight:600; color:var(--marine); transition:color .18s; }
.phase-titre small{ display:block; font-weight:400; font-size:.9rem; color:var(--texte-doux); margin-top:.3rem; letter-spacing:0; line-height:1.5; }
.plus{ width:1.7rem; height:1.7rem; flex:none; position:relative; border:1px solid var(--trait); border-radius:50%; }
.plus::before,.plus::after{ content:""; position:absolute; inset:50% 26%; height:1px; background:var(--marine); transform:translateY(-50%); }
.plus::after{ transform:translateY(-50%) rotate(90deg); transition:transform .22s; }
.phase[open] .plus::after,.q[open] .plus::after{ transform:translateY(-50%) rotate(0); }
.phase[open] .plus,.q[open] .plus{ border-color:var(--ocean); }
.phase-corps{ padding:0 .25rem 1.75rem 4.15rem; display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; }
@media (max-width:760px){
  .phase > summary{ grid-template-columns:2rem 1fr auto; gap:.85rem; }
  .phase-corps{ padding-left:0; grid-template-columns:1fr; gap:1.1rem; }
}
.livrable{ background:var(--blanc); border-left:3px solid var(--ocean); padding:1rem 1.2rem; }
.livrable h4{ font-size:.85rem; font-weight:600; color:var(--texte-doux); margin-bottom:.5rem; }
.livrable ul{ margin:0; padding-left:1.05rem; font-size:.94rem; }
.livrable li{ margin-bottom:.3rem; }

/* ============================================================
   RÉALISATIONS
   ============================================================ */
.realisations{ padding:var(--rythme) 0; }
.grille-real{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.75rem; margin-top:.5rem; }
.real{ border:1px solid var(--trait); background:var(--blanc); display:flex; flex-direction:column; }
.real-visuel{ position:relative; }
.real-visuel input{ position:absolute; opacity:0; width:0; height:0; }
.onglets{ display:flex; border-bottom:1px solid var(--trait); }
.onglets label{
  flex:1; text-align:center; font-size:.8rem; font-weight:600; color:var(--texte-doux);
  padding:.6rem .3rem; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s,border-color .15s,background .15s;
}
.onglets label:hover{ background:var(--glacier); }
.vues > figure{ display:none; margin:0; }
.vue-a:checked ~ .onglets label[data-v="a"],
.vue-b:checked ~ .onglets label[data-v="b"],
.vue-c:checked ~ .onglets label[data-v="c"]{ color:var(--ocean); border-bottom-color:var(--ocean); }
.vue-a:checked ~ .vues .f-a,
.vue-b:checked ~ .vues .f-b,
.vue-c:checked ~ .vues .f-c{ display:block; }
.vue-a:focus-visible ~ .onglets label[data-v="a"],
.vue-b:focus-visible ~ .onglets label[data-v="b"],
.vue-c:focus-visible ~ .onglets label[data-v="c"]{ outline:3px solid var(--ocean-clair); outline-offset:-3px; }
.photo{
  aspect-ratio:4/3; background:var(--glacier); border-bottom:1px solid var(--trait);
  display:grid; place-items:center; text-align:center; padding:1rem;
  font-size:.82rem; font-weight:500; color:var(--texte-doux);
}
.real-corps{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.real-lieu{ font-size:.78rem; font-weight:600; color:var(--ocean); margin:0 0 .45rem; }
.real h3{ font-size:1.08rem; margin-bottom:.6rem; }
.real p{ font-size:.92rem; color:var(--texte-doux); margin-bottom:.9rem; }
.real-meta{ list-style:none; margin:auto 0 0; padding:.9rem 0 0; border-top:1px solid var(--trait); display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.8rem; color:var(--texte-doux); }

/* ============================================================
   COMPARATIF
   ============================================================ */
.comparatif{ background:var(--marine); color:var(--blanc); padding:var(--rythme) 0; }
.colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
@media (max-width:760px){ .colonnes{ grid-template-columns:1fr; } }
.colonne h3{ font-size:1.12rem; margin-bottom:1.1rem; padding-bottom:.7rem; border-bottom:1px solid var(--trait-sombre); }
.colonne ul{ list-style:none; margin:0; padding:0; }
.colonne li{ padding:.6rem 0 .6rem 1.7rem; position:relative; font-size:.96rem; }
.col-sans li{ color:#9DBBD6; }
.col-sans li::before{ content:"×"; position:absolute; left:.3rem; top:.5rem; font-size:1.05rem; color:#6E8FAE; }
.col-avec li{ color:var(--blanc); }
.col-avec li::before{ content:""; position:absolute; left:.35rem; top:1.05rem; width:.6rem; height:.6rem; border-left:2px solid var(--glacier); border-bottom:2px solid var(--glacier); transform:rotate(-45deg); }

/* ============================================================
   QUI SOMMES-NOUS
   ============================================================ */
.qui{ padding:var(--rythme) 0; }
.qui-grille{ display:grid; grid-template-columns:minmax(210px,290px) 1fr; gap:clamp(1.75rem,5vw,3.5rem); align-items:start; }
@media (max-width:760px){ .qui-grille{ grid-template-columns:1fr; } .portrait{ max-width:270px; } }
.portrait{ position:relative; padding:.9rem; }
.portrait img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:3/4; }
.portrait .equerre{ width:26px; height:26px; }
.portrait .equerre path{ stroke:var(--ocean); stroke-width:3.4; }
.qui blockquote{ margin:0 0 1.3rem; font-size:clamp(1.1rem,2.1vw,1.4rem); font-weight:500; line-height:1.4; color:var(--marine); max-width:26ch; }
.signature{ font-weight:600; margin-top:1.2rem; color:var(--marine); }
.signature span{ display:block; font-weight:400; font-size:.88rem; color:var(--texte-doux); }

/* ============================================================
   SECTEUR
   ============================================================ */
.secteur{ padding:var(--rythme) 0; background:var(--glacier); }
.secteur-grille{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.75rem,5vw,3.5rem); align-items:center; }
@media (max-width:880px){ .secteur-grille{ grid-template-columns:1fr; } }
.carte{ width:100%; height:auto; display:block; }
.carte .dep{ fill:var(--blanc); stroke:var(--ocean); stroke-width:1.6; stroke-linejoin:round; }
.carte .dep-actif{ fill:#CFE6F9; }
.carte .rhone{ fill:none; stroke:#7FB4DF; stroke-width:2.6; stroke-linecap:round; }
.carte .pt{ fill:var(--ocean); }
.carte .pt-base{ fill:var(--marine); }
.carte text{ font-family:var(--police); font-size:11.5px; font-weight:500; fill:var(--texte-doux); }
.carte .nom-dep{ font-size:17px; font-weight:700; fill:var(--ocean); letter-spacing:.08em; opacity:.85; }
.carte .nom-base{ font-size:14px; font-weight:700; fill:var(--marine); }
.deux-dep{ display:flex; gap:1.25rem; flex-wrap:wrap; margin:0 0 1.25rem; padding:0; list-style:none; }
.deux-dep li{ flex:1 1 140px; border-left:3px solid var(--ocean); padding:.15rem 0 .15rem .8rem; }
.deux-dep b{ display:block; font-size:1.15rem; color:var(--marine); }
.deux-dep span{ font-size:.85rem; color:var(--texte-doux); }
.communes{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.25rem 0 0; padding:0; list-style:none; }
.communes li{ font-size:.82rem; color:var(--texte-doux); border:1px solid var(--trait); background:var(--blanc); padding:.28rem .65rem; border-radius:2px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:var(--rythme) 0; }
.faq-liste{ margin-top:1.5rem; border-top:1px solid var(--trait); max-width:820px; }
.q{ border-bottom:1px solid var(--trait); }
.q > summary{ display:flex; justify-content:space-between; align-items:center; gap:1.25rem; padding:1.15rem .25rem; cursor:pointer; list-style:none; font-weight:600; font-size:1rem; color:var(--marine); }
.q > summary::-webkit-details-marker{ display:none; }
.q > summary:hover{ color:var(--ocean); }
.q-corps{ padding:0 .25rem 1.35rem; }
.q-corps p{ font-size:.96rem; margin-bottom:.7rem; }
.q-corps p:last-child{ margin-bottom:0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--marine); color:var(--blanc); padding:var(--rythme) 0; }
.contact-grille{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.75rem,5vw,3.5rem); align-items:start; }
@media (max-width:900px){ .contact-grille{ grid-template-columns:1fr; } }
fieldset{ border:0; padding:0; margin:0 0 1.6rem; }
legend{ font-weight:600; font-size:.98rem; margin-bottom:.75rem; padding:0; color:var(--blanc); }
.puces{ display:flex; flex-wrap:wrap; gap:.5rem; }
.puce input{ position:absolute; opacity:0; width:0; height:0; }
.puce span{ display:inline-block; font-size:.88rem; font-weight:500; border:1px solid var(--trait-sombre); padding:.5rem .95rem; border-radius:3px; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.puce span:hover{ border-color:var(--blanc); }
.puce input:checked + span{ background:var(--blanc); border-color:var(--blanc); color:var(--marine); font-weight:600; }
.puce input:focus-visible + span{ outline:3px solid var(--glacier); outline-offset:3px; }
.puce-coche span::before{ content:"+ "; font-weight:600; }
.puce-coche input:checked + span::before{ content:"✓ "; }
.aide{ font-size:.82rem; color:#A9C6E2; margin:.6rem 0 0; }
.champs{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.15rem; }
@media (max-width:600px){ .champs{ grid-template-columns:1fr; } }
.champ{ display:flex; flex-direction:column; }
.champ.large{ grid-column:1/-1; }
.champ label{ font-size:.85rem; font-weight:500; margin-bottom:.35rem; color:#D9E8F5; }
.champ label em{ font-style:normal; color:#A9C6E2; font-weight:400; }
.champ input,.champ textarea{
  font-family:var(--police); font-size:.95rem; color:var(--blanc);
  background:rgba(255,255,255,.06); border:1px solid var(--trait-sombre);
  border-radius:3px; padding:.7rem .85rem; transition:border-color .15s,background .15s;
}
.champ input::placeholder,.champ textarea::placeholder{ color:#7C9BBA; }
.champ input:focus,.champ textarea:focus{ background:rgba(255,255,255,.1); border-color:var(--glacier); outline:none; }
.champ textarea{ min-height:115px; resize:vertical; }
.rgpd{ font-size:.82rem; color:#A9C6E2; max-width:52ch; margin:1rem 0 0; }
.suite{ border:1px solid var(--trait-sombre); padding:1.4rem; }
.suite h3{ font-size:1.05rem; margin-bottom:1.1rem; }
.suite ol{ margin:0 0 1.5rem; padding:0; list-style:none; counter-reset:etape; }
.suite li{ counter-increment:etape; padding-left:2.1rem; position:relative; margin-bottom:.9rem; font-size:.92rem; color:#CBDFF2; }
.suite li::before{
  content:counter(etape); position:absolute; left:0; top:0;
  width:1.5rem; height:1.5rem; display:grid; place-items:center;
  border:1px solid var(--glacier); color:var(--glacier); border-radius:50%; font-size:.76rem; font-weight:600;
}
.coords{ border-top:1px solid var(--trait-sombre); padding-top:1.1rem; }
.coords a{ display:flex; align-items:center; gap:.65rem; text-decoration:none; font-weight:600; font-size:.98rem; padding:.35rem 0; color:var(--blanc); }
.coords a:hover{ color:var(--glacier); }
.coords svg{ width:17px; height:17px; flex:none; stroke:var(--glacier); fill:none; stroke-width:1.8; }

/* ============================================================
   PIED DE PAGE / BARRE MOBILE
   ============================================================ */
.pied{ background:var(--marine-2); color:#CBDFF2; padding:2.75rem 0 7.5rem; font-size:.88rem; }
@media (min-width:761px){ .pied{ padding-bottom:2.75rem; } }
.pied-grille{ display:flex; flex-wrap:wrap; gap:1.75rem 3rem; justify-content:space-between; align-items:flex-start; }
.pied h4{ font-size:.88rem; margin-bottom:.5rem; color:var(--blanc); }
.pied a{ color:#CBDFF2; text-decoration:none; display:block; padding:.2rem 0; }
.pied a:hover{ color:#fff; text-decoration:underline; }
.mentions{ margin-top:2rem; padding-top:1.1rem; border-top:1px solid var(--trait-sombre); font-size:.8rem; color:#8FB0CD; }
.barre-mobile{ position:fixed; bottom:0; left:0; right:0; z-index:110; display:none; gap:.55rem; padding:.65rem; background:rgba(0,36,76,.97); border-top:1px solid var(--trait-sombre); }
.barre-mobile .btn{ flex:1; padding:.75rem .4rem; }
@media (max-width:760px){ .barre-mobile{ display:flex; } }

/* ============================================================
   AJOUTS WORDPRESS
   Ce que la maquette statique ne couvrait pas : photos réelles,
   messages du formulaire, pages intérieures.
   ============================================================ */

/* Photos de réalisations venues de la médiathèque */
.vues img,
.photo-reelle{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-bottom:1px solid var(--trait); background:var(--glacier);
}
/* Un seul cliché disponible : les onglets n'ont plus de sens */
.real-visuel--unique .onglets{ display:none; }

/* Retour d'envoi du formulaire */
.message{
  padding:.9rem 1.15rem; border-left:3px solid; margin:0 0 1.75rem;
  font-weight:500; max-width:60ch;
}
.message--succes{ border-color:var(--glacier); background:rgba(229,241,251,.12); color:var(--blanc); }
.message--erreur{ border-color:#E8A0A0; background:rgba(232,160,160,.12); color:var(--blanc); }

/* Pot de miel anti-robots : hors écran, mais accessible aux lecteurs d'écran */
.pot-de-miel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Pages intérieures (mentions légales, confidentialité, 404) */
.page-simple{ padding:var(--rythme) 0; }
.contenu-simple{ max-width:70ch; }
.contenu-simple h2{ font-size:1.35rem; margin:2rem 0 .75rem; }
.contenu-simple h3{ font-size:1.1rem; margin:1.5rem 0 .5rem; }
.contenu-simple ul,.contenu-simple ol{ padding-left:1.25rem; }
.contenu-simple li{ margin-bottom:.4rem; }
.contenu-simple img{ max-width:100%; height:auto; }
.contenu-simple a{ color:var(--ocean); }
.pagination{ margin-top:2rem; }
.pagination a{ color:var(--ocean); }

/* Galerie d'une réalisation */
.galerie-chantier{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem; margin-bottom:2rem;
}
.galerie-chantier figure{ margin:0; }
.galerie-chantier img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.galerie-chantier figcaption{
  font-size:.82rem; font-weight:600; color:var(--texte-doux);
  padding-top:.45rem;
}

/* Menu WordPress : le thème stylise des liens, pas une liste */
.nav ul{ display:flex; gap:1.35rem; list-style:none; margin:0; padding:0; }
.nav li{ margin:0; }
.pied ul{ list-style:none; margin:0; padding:0; }

/* Barre d'administration : elle décale l'en-tête collant */
.admin-bar .entete{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .entete{ top:46px; } }

/* ============================================================
   CORRECTIFS D'INTÉGRATION
   ============================================================ */

/* --- En-tête : plus rien ne doit passer à la ligne --- */
.entete{ position:sticky; }
.entete-inner{ flex-wrap:nowrap; gap:1rem; }
.marque{ min-width:0; }
.marque b,
.marque i{ white-space:nowrap; }
.nav a{ white-space:nowrap; }
.btn{ white-space:nowrap; }

/* La ligne sous le nom disparaît avant que le menu ne soit à l'étroit. */
@media (max-width:1240px){ .marque i{ display:none; } }

/* --- Bouton de menu --- */
.ecran-lecteur{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.burger{
  display:none; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; flex:none;
  background:transparent; border:1px solid var(--trait-sombre); border-radius:3px;
  color:var(--blanc); cursor:pointer; transition:border-color .18s;
}
.burger:hover{ border-color:var(--blanc); }
.burger-barres,
.burger-barres::before,
.burger-barres::after{
  display:block; width:18px; height:2px; background:currentColor;
  transition:transform .2s, opacity .2s;
}
.burger-barres{ position:relative; }
.burger-barres::before,
.burger-barres::after{ content:""; position:absolute; left:0; }
.burger-barres::before{ top:-6px; }
.burger-barres::after{ top:6px; }
.entete.ouvert .burger-barres{ background:transparent; }
.entete.ouvert .burger-barres::before{ transform:translateY(6px) rotate(45deg); }
.entete.ouvert .burger-barres::after{ transform:translateY(-6px) rotate(-45deg); }

/* --- Navigation repliée --- */
@media (max-width:1040px){
  .burger{ display:inline-flex; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--marine); border-bottom:1px solid var(--trait-sombre);
    padding:.25rem var(--marge) 1rem;
    box-shadow:0 18px 30px rgba(0,36,76,.22);
  }
  .entete.ouvert .nav{ display:flex; }
  .nav ul{ flex-direction:column; gap:0; width:100%; }
  .nav a{
    display:block; padding:.85rem 0; font-size:.98rem;
    border-bottom:1px solid var(--trait-sombre); border-bottom-width:1px;
  }
  .nav a:hover{ border-bottom-color:var(--trait-sombre); color:var(--glacier); }
}

/* Sur mobile, le bouton de l'en-tête fait doublon avec la barre du bas. */
@media (max-width:620px){ .entete .btn-petit{ display:none; } }

/* --- Hero : le titre respirait mal dans sa colonne --- */
.hero h1{ max-width:22ch; }
.lockup-mots i{ white-space:nowrap; }
@media (max-width:420px){ .lockup-mots i{ white-space:normal; } }

/* Le portrait est désormais servi en WebP avec repli JPEG. */
.portrait picture{ display:block; }

/* Le résumé d'une réalisation conserve les retours à la ligne saisis. */
.real-resume p{ font-size:.92rem; color:var(--texte-doux); margin-bottom:.7rem; }
.real-resume p:last-child{ margin-bottom:.9rem; }