/* ==========================================================================
   NEXT COM — Agence de publicité
   Feuille de styles principale
   --------------------------------------------------------------------------
   1. Variables & thème       6. Hero              11. CTA & pied de page
   2. Base & typographie      7. Sections communes 12. Animations
   3. Utilitaires             8. Portfolio         13. Responsive
   4. Boutons                 9. Formulaire
   5. En-tête / navigation   10. FAQ
   ========================================================================== */

/* ---------- 1. Variables & thème ---------- */
:root{
  /* Fonds — bleu nuit de la charte */
  --navy-950:#04070F;
  --navy-900:#070C18;
  --navy-850:#0A1022;
  --navy-800:#0D1428;
  --navy-700:#16203D;

  /* Bleus de marque */
  --blue-700:#0741A8;
  --blue-600:#0052D6;
  --blue-500:#0066F9;
  --blue-400:#2F8BFF;
  --blue-300:#7AB6FF;

  /* Textes */
  --white:#FFFFFF;
  --text:#E8EEFB;
  --muted:#97A5C6;
  --muted-2:#6D7C9F;

  /* Surfaces */
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.18);
  --card:rgba(255,255,255,.035);
  --card-hover:rgba(255,255,255,.065);

  /* Rayons — écho aux extrémités arrondies du logo */
  --r-sm:14px;
  --r-md:20px;
  --r-lg:28px;
  --r-xl:36px;

  --shadow:0 26px 70px -24px rgba(2,6,16,.9);
  --shadow-blue:0 14px 34px -14px rgba(0,102,249,.30);

  --font-head:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  --container:1200px;
  --gutter:24px;
  --header-h:78px;

  /* Rythme vertical : demi-espace. Deux blocs voisins portent chacun le
     leur, donc l espace visible entre eux vaut le double — soit 88 px sur
     telephone et 152 px sur grand ecran. Un seul reglage pour tout le site. */
  --rythme:clamp(44px,5.6vw,76px);

  --ease:cubic-bezier(.22,.68,.36,1);
  --spring:cubic-bezier(.34,1.6,.64,1);
}

/* ---------- 2. Base & typographie ---------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.65;
  color:var(--text);
  background:var(--navy-850);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Halos + grille fixés derrière le contenu */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(0,102,249,.30), transparent 62%),
    radial-gradient(760px 560px at 92% 4%, rgba(47,139,255,.16), transparent 60%),
    radial-gradient(1000px 700px at 50% 118%, rgba(0,82,214,.20), transparent 64%),
    var(--navy-850);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 20%, #000 20%, transparent 78%);
          mask-image:radial-gradient(75% 60% at 50% 20%, #000 20%, transparent 78%);
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.022em;
  text-wrap:balance;
  color:var(--white);
  margin:0 0 .5em;
}
h1{font-size:clamp(2.5rem,5.6vw,4.35rem);letter-spacing:-.032em}
h2{font-size:clamp(1.95rem,3.6vw,2.9rem);letter-spacing:-.028em}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
h4{font-size:1.02rem;font-weight:700}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--blue-300);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--white)}

img,svg{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--blue-500);color:#fff}

:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;border-radius:6px}

/* ---------- 3. Utilitaires de mise en page ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding:var(--rythme) 0;position:relative}
.section--tight{padding:var(--rythme) 0}   /* meme rythme : un seul espace pour tout le site */

.section-head{max-width:720px;margin-bottom:56px}
.section-head--center{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-head);
  font-size:.735rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-300);
  background:rgba(47,139,255,.10);
  border:1px solid rgba(47,139,255,.24);
  padding:7px 15px 7px 12px;
  border-radius:999px;
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--blue-400);
  box-shadow:0 0 0 4px rgba(47,139,255,.13);
}

.lead{font-size:clamp(1.02rem,1.35vw,1.17rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.gradient-text{
  background:linear-gradient(100deg,var(--blue-300) 0%,var(--blue-400) 45%,#B7D6FF 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- 4. Boutons & liens ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-head);
  font-size:.9rem;
  font-weight:700;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .22s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:linear-gradient(135deg,var(--blue-500),var(--blue-400));
  color:#fff;
  box-shadow:var(--shadow-blue);
}
.btn-primary:hover{color:#fff;box-shadow:0 18px 42px -14px rgba(0,102,249,.42)}
.btn-primary:hover svg{transform:translateX(3px)}

.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--border-strong);
  color:var(--white);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.32);color:#fff}

.btn-lg{padding:17px 32px;font-size:.96rem}
.btn-block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:.88rem;
  color:var(--blue-300);
}
.link-arrow svg{width:15px;height:15px;transition:transform .22s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 5. En-tête / navigation ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  height:var(--header-h);
  display:flex;
  align-items:center;
  border-bottom:1px solid transparent;
  transition:background .28s var(--ease), border-color .28s var(--ease);
}
.site-header.is-stuck{
  background:rgba(7,12,24,.82);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{
  display:inline-flex;
  align-items:center;
  transform-origin:left center;
  transition:transform .6s var(--spring);
}
.logo img,.logo svg{
  height:42px;
  width:auto;
  display:block;
  transition:filter .4s var(--ease);
}

/* Au survol : le logo se soulève légèrement, avec un rebond,
   et prend un halo aux couleurs de la marque. */
.logo:hover{transform:translateY(-3px) scale(1.03)}
.logo:hover img,.logo:hover svg{filter:drop-shadow(0 8px 16px rgba(0,102,249,.28))}

/* Au clic : le logo s enfonce brièvement, comme un vrai bouton. */
.logo:active{transform:translateY(0) scale(.97);transition-duration:.12s}

.footer-brand .logo img,.footer-brand .logo svg{height:48px}

.nav{display:flex;align-items:center;gap:6px}
.nav-link{
  font-family:var(--font-head);
  font-size:.875rem;
  font-weight:600;
  color:var(--muted);
  padding:9px 15px;
  border-radius:999px;
  position:relative;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover{color:var(--white);background:rgba(255,255,255,.05)}
.nav-cta{margin-left:12px;padding:11px 22px;font-size:.85rem}

/* Page active — piloté par data-page sur <body>, sans JS */
body[data-page="accueil"]   .nav-link[data-nav="accueil"],
body[data-page="services"]  .nav-link[data-nav="services"],
body[data-page="portfolio"] .nav-link[data-nav="portfolio"],
body[data-page="contact"]   .nav-link[data-nav="contact"]{
  color:var(--white);
  background:rgba(47,139,255,.13);
}
body[data-page="accueil"]   .nav-link[data-nav="accueil"]::after,
body[data-page="services"]  .nav-link[data-nav="services"]::after,
body[data-page="portfolio"] .nav-link[data-nav="portfolio"]::after,
body[data-page="contact"]   .nav-link[data-nav="contact"]::after{
  content:"";
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:16px;height:2px;border-radius:2px;background:var(--blue-400);
}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  padding:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.nav-toggle span{
  display:block;width:19px;height:2px;border-radius:2px;background:var(--white);
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span+span{margin-top:5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 6. Hero ---------- */
.hero{position:relative}
.hero--center{text-align:center;padding:clamp(84px,11vw,148px) 0 var(--rythme)}
.hero--center h1{max-width:19ch;margin-inline:auto}
.hero--center .lead{margin-inline:auto}
.hero--center .hero-actions{justify-content:center;margin-bottom:0}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:34px;font-size:clamp(1.05rem,1.45vw,1.2rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}

/* ---------- Icônes flottantes du hero (accueil) ---------- */
/* Quatre icônes, une par service. Décor pur — le bloc est aria-hidden et ne
   capte jamais le clic, le texte reste au-dessus.
   Le flottement est réparti sur trois éléments imbriqués, chacun portant une
   seule transformation, sinon la dernière écraserait les précédentes :
     i    → le balancement horizontal
     span → la montée-descente, et le halo qui respire
     svg  → l'inclinaison
   Les durées horizontale et verticale sont volontairement sans rapport
   simple entre elles (11 s contre 8 s, par exemple). Le résultat est une
   courbe de Lissajous : l'icône décrit une boucle qui ne se referme jamais
   au même endroit, au lieu de faire un aller-retour en ligne droite. */
.hero-icons{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  --flot:cubic-bezier(.37,0,.63,1);   /* sinusoïdal : un vrai flottement */
  --ax:7px;                            /* amplitude horizontale */
  --ay:11px;                           /* amplitude verticale */
}
.hero--center .container{position:relative;z-index:1}

.hero-icons i{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  display:block;
  animation:hero-x var(--tx) var(--flot) var(--dx) infinite;
}
.hero-icons i span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border-radius:calc(var(--s) * .29);
  background:linear-gradient(145deg,rgba(47,139,255,.22),rgba(0,102,249,.06));
  border:1px solid rgba(122,182,255,.28);
  backdrop-filter:blur(2px);
  animation:hero-y    var(--ty) var(--flot) var(--dy) infinite,
            hero-halo var(--th) var(--flot) var(--dy) infinite;
}
.hero-icons svg{
  width:48%;
  height:48%;
  fill:none;
  stroke:var(--blue-300);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:hero-tilt var(--tr) var(--flot) var(--dx) infinite;
}

@keyframes hero-x{
  0%,100%{transform:translateX(calc(var(--ax) * -1))}
  50%    {transform:translateX(var(--ax))}
}
@keyframes hero-y{
  0%,100%{transform:translateY(var(--ay))}
  50%    {transform:translateY(calc(var(--ay) * -1))}
}
@keyframes hero-tilt{
  0%,100%{transform:rotate(calc(var(--r) * -1))}
  50%    {transform:rotate(var(--r))}
}
/* Le halo respire plus lentement que le mouvement : c'est ce décalage qui
   donne la profondeur, sans quoi tout pulserait d'un bloc. */
@keyframes hero-halo{
  0%,100%{box-shadow:0 12px 28px -18px rgba(0,102,249,.38);opacity:.56}
  50%    {box-shadow:0 20px 44px -14px rgba(0,102,249,.70);opacity:.84}
}

/* Positions — ordinateur. Deux à gauche, deux à droite, le texte au centre. */
.hero-icons i:nth-child(1){--x:7%;  --y:24%; --s:66px; --r:4deg;   --tx:11s;   --ty:8s;    --tr:13s;   --th:6.5s; --dx:0s;    --dy:-2.4s}
.hero-icons i:nth-child(2){--x:14%; --y:68%; --s:56px; --r:-3.5deg;--tx:9s;    --ty:12.5s; --tr:10s;   --th:7.8s; --dx:-3.1s; --dy:-5.6s}
.hero-icons i:nth-child(3){--x:85%; --y:20%; --s:62px; --r:-4.5deg;--tx:13.5s; --ty:9.5s;  --tr:15s;   --th:5.9s; --dx:-6.3s; --dy:-1.2s}
.hero-icons i:nth-child(4){--x:79%; --y:66%; --s:54px; --r:3deg;   --tx:10.5s; --ty:14s;   --tr:11.5s; --th:8.6s; --dx:-8.7s; --dy:-4.3s}

/* Tablette : le paragraphe court d’un bord à l’autre à cette largeur, mais le
   titre garde de larges marges — les icônes se répartissent donc à sa hauteur.
   Les décalages sont en pixels depuis les bords, pas en pourcentage : un
   pourcentage rétrécit avec l’écran et finit par coller au bord. */
@media (max-width:1180px){
  .hero-icons{--ax:5px}
  .hero-icons i:nth-child(1){left:36px;  --y:22%; --s:52px}
  .hero-icons i:nth-child(2){left:52px;  --y:48%; --s:44px}
  .hero-icons i:nth-child(3){left:auto; right:36px; --y:18%; --s:48px}
  .hero-icons i:nth-child(4){left:auto; right:52px; --y:46%; --s:44px}
}

/* Téléphone : les icônes reviennent le long du titre, deux à gauche et deux
   à droite, comme sur ordinateur. À cette largeur elles passent forcément
   derrière le texte — c’est assumé et sans conséquence : elles sont en
   z-index 0, le texte en 1, donc rien n’est jamais masqué.
   Les décalages sont en pixels depuis les bords pour garder une marge
   constante quelle que soit la taille de l’écran. */
@media (max-width:640px){
  .hero-icons{--ax:4px; --ay:6px}
  .hero-icons i:nth-child(1){left:20px;  --y:22%; --s:34px}
  .hero-icons i:nth-child(2){left:26px;  --y:38%; --s:30px}
  .hero-icons i:nth-child(3){left:auto; right:20px; --y:25%; --s:32px}
  .hero-icons i:nth-child(4){left:auto; right:26px; --y:40%; --s:32px}
}
/* ---------- 7. Sections communes ---------- */

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:30px 28px;
  overflow:hidden;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), rgba(47,139,255,.11), transparent 70%);
  opacity:0;transition:opacity .35s var(--ease);
}
.card:hover{transform:translateY(-5px);background:var(--card-hover);border-color:var(--border-strong)}
.card:hover::after{opacity:1}
.card > *{position:relative;z-index:1}

.card-icon{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(47,139,255,.22),rgba(0,102,249,.10));
  border:1px solid rgba(47,139,255,.28);
  margin-bottom:20px;
}
.card-icon svg{width:23px;height:23px;stroke:var(--blue-300);fill:none;stroke-width:1.8}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.94rem;margin-bottom:0}
.card-list{margin-top:18px;display:grid;gap:9px}
.card-list li{position:relative;padding-left:24px;font-size:.885rem;color:var(--muted)}
.card-list li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:13px;height:8px;
  border-left:2px solid var(--blue-400);border-bottom:2px solid var(--blue-400);
  transform:rotate(-45deg);
}
.card-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}

.card-num{
  font-family:var(--font-head);font-weight:900;font-size:2.6rem;line-height:1;
  color:rgba(47,139,255,.22);margin-bottom:14px;
}

/* Bloc alterné (services détaillés) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
.split + .split{margin-top:clamp(56px,7vw,96px)}
.split--flip .split-media{order:-1}
.split h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.split-media{
  position:relative;border-radius:var(--r-xl);border:1px solid var(--border);
  background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
  min-height:330px;overflow:hidden;display:grid;place-items:center;
}
.split-media::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 30% 20%, rgba(47,139,255,.20), transparent 70%);
}
.split-media > svg{width:104px;height:104px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.1;position:relative}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.tag{
  font-size:.78rem;font-weight:600;color:var(--muted);
  border:1px solid var(--border);background:rgba(255,255,255,.035);
  padding:6px 13px;border-radius:999px;
}

/* ---------- 8. Portfolio ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{
  position:relative;display:block;color:inherit;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);
  background:var(--card);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.work:hover{transform:translateY(-6px);border-color:var(--border-strong);color:inherit}
.work[hidden]{display:none}
.work-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(140deg,var(--g1,#0066F9),var(--g2,#16203D));
}
.work-media::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
}
.work-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.work-media b{
  position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  font-family:var(--font-head);font-weight:900;font-size:clamp(1.6rem,3.4vw,3.1rem);letter-spacing:-.04em;padding-inline:16px;text-align:center;overflow:hidden;
  color:rgba(255,255,255,.32);
  transition:transform .5s var(--ease);
}
.work:hover .work-media b{transform:scale(1.08)}
.work-cat{
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(4,7,15,.66);border:1px solid rgba(255,255,255,.20);color:#fff;
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);
}
.work-body{padding:22px 24px 26px}
.work-body h3{font-size:1.1rem;margin-bottom:7px}
.work-body p{font-size:.88rem;color:var(--muted);margin-bottom:0}

/* ---------- 9. Formulaire de contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,54px);align-items:start}

.form-wrap{
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(26px,3.5vw,40px);box-shadow:var(--shadow);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field label{
  font-family:var(--font-head);font-size:.79rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field label span{color:var(--blue-400)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.95rem;color:var(--white);
  background:rgba(4,8,18,.55);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:14px 16px;
  width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2397A5C6%27 stroke-width=%272.4%27 stroke-linecap=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px;padding-right:44px;
}
.field select option{background:#0D1428;color:#E8EEFB}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-400);background:rgba(4,8,18,.8);
  box-shadow:0 0 0 4px rgba(47,139,255,.14);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:#FF6B6B;box-shadow:0 0 0 4px rgba(255,107,107,.12);
}
.field .error{font-size:.78rem;color:#FF8E8E;margin-top:7px;display:none}
.field.has-error .error{display:block}

.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:24px}
.check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:#0066F9}
.check label{
  font-size:.83rem;color:var(--muted);text-transform:none;letter-spacing:0;
  font-family:var(--font-body);font-weight:400;margin:0;
}
.check.has-error label{color:#FF8E8E}

.form-note{font-size:.8rem;color:var(--muted-2);margin-top:16px;text-align:center}

.form-success{display:none;text-align:center;padding:26px 0}
.form-success.is-visible{display:block}
.form-success i{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  background:linear-gradient(135deg,#1FBF7A,#3EE39B);
}
.form-success i svg{width:28px;height:28px;stroke:#04220F;stroke-width:3;fill:none}
.form-wrap.is-sent form{display:none}

.info-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:22px 24px;margin-bottom:14px;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.info-card:hover{transform:translateX(4px);border-color:var(--border-strong)}
.info-card i{
  width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(47,139,255,.22),rgba(0,102,249,.08));
  border:1px solid rgba(47,139,255,.26);
}
.info-card i svg{width:19px;height:19px;stroke:var(--blue-300);fill:none;stroke-width:1.9}
.info-card h4{margin:0 0 4px;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.info-card p{margin:0;font-size:.98rem;color:var(--white);font-weight:500}
.info-card p a{color:var(--white)}
.info-card p a:hover{color:var(--blue-300)}
.info-card small{display:block;font-size:.82rem;color:var(--muted-2);margin-top:3px;font-weight:400}

.map{
  border-radius:var(--r-xl);border:1px solid var(--border);
  min-height:270px;position:relative;overflow:hidden;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(47,139,255,.20), transparent 70%),
    linear-gradient(160deg,var(--navy-800),var(--navy-900));
  display:grid;place-items:center;text-align:center;padding:24px;
}
.map::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:44px 44px;
}
.map-pin{position:relative;z-index:1}
.map-pin svg{width:34px;height:34px;stroke:var(--blue-400);fill:none;stroke-width:1.7;margin:0 auto 12px}
.map-pin p{margin:0;font-size:.9rem;color:var(--muted)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}

/* ---------- 10. FAQ / accordeon ---------- */
.faq{max-width:840px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:24px 4px;
  font-family:var(--font-head);font-size:1.02rem;font-weight:700;color:var(--white);
  transition:color .2s var(--ease);
}
.faq-q:hover{color:var(--blue-300)}
.faq-q i{
  position:relative;
  width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--border-strong);
  display:grid;place-items:center;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.faq-q i::before,.faq-q i::after{
  content:"";position:absolute;width:11px;height:2px;border-radius:2px;background:var(--blue-300);
}
.faq-q i::after{transform:rotate(90deg);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.faq-item.is-open .faq-q i{background:rgba(47,139,255,.16);transform:rotate(180deg)}
.faq-item.is-open .faq-q i::after{transform:rotate(0);opacity:0}
.faq-a{overflow:hidden;max-height:0;transition:max-height .38s var(--ease)}
.faq-a p{padding:0 4px 26px;color:var(--muted);font-size:.95rem;margin:0;max-width:72ch}

/* ---------- 11. Bandeau CTA & pied de page ---------- */
.cta-band{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid rgba(47,139,255,.30);
  background:linear-gradient(150deg,rgba(0,102,249,.30),rgba(0,82,214,.08));
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:auto -20% -80% -20%;height:140%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(47,139,255,.26), transparent 70%);
  pointer-events:none;
}
.cta-band > *{position:relative}
.cta-band h2{margin-bottom:16px;max-width:20ch;margin-inline:auto}
.cta-band p{color:#C6D8F8;max-width:56ch;margin:0 auto 32px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.site-footer{margin-top:var(--rythme);border-top:1px solid var(--border);background:rgba(4,7,15,.55)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding:clamp(48px,6vw,72px) 0 48px}
.footer-brand .logo{margin-bottom:18px}
.footer-brand p{font-size:.9rem;color:var(--muted);max-width:34ch}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--border);background:rgba(255,255,255,.035);
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.socials a svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.8;transition:stroke .22s var(--ease)}
.socials a:hover{background:var(--blue-500);border-color:transparent;transform:translateY(-3px)}
.socials a:hover svg{stroke:#fff}

.footer-col h4{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--white);margin-bottom:18px}
.footer-col li{margin-bottom:11px}
.footer-col a{font-size:.9rem;color:var(--muted)}
.footer-col a:hover{color:var(--white)}
.footer-col address{font-style:normal;font-size:.9rem;color:var(--muted);line-height:1.8}
.footer-col address a{display:block;color:var(--muted)}
.footer-col address a:hover{color:var(--white)}

.footer-bottom{
  border-top:1px solid var(--border);
  padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.83rem;color:var(--muted-2);
}
.footer-bottom nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-bottom a{color:var(--muted-2)}
.footer-bottom a:hover{color:var(--white)}

/* Bandeau de titre des pages internes */
.page-hero{padding:clamp(56px,7vw,92px) 0 var(--rythme);text-align:center}
.page-hero .lead{margin-inline:auto}
.breadcrumb{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:.8rem;color:var(--muted-2);margin-bottom:20px;
}
.breadcrumb a{color:var(--muted-2)}
.breadcrumb a:hover{color:var(--blue-300)}

/* ---------- 12. Apparition au defilement ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- 13. Responsive ---------- */
@media (max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  :root{--header-h:70px}

  .nav-toggle{display:flex}
  .nav{
    position:fixed;
    inset:var(--header-h) 0 auto;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:22px var(--gutter) 30px;
    background:rgba(7,12,24,.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
    transform:translateY(-14px);
    opacity:0;
    visibility:hidden;
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav-link{padding:14px 16px;font-size:1rem;border-radius:var(--r-sm)}
  .nav-link::after{display:none !important}
  .nav-cta{margin:12px 0 0;justify-content:center;padding:15px 22px}
  .logo img,.logo svg{height:36px}

  .grid-3,.works{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:28px}
  .split--flip .split-media{order:0}
  .split-media{min-height:240px}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  :root{--gutter:18px}
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4,.works,.form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .card{padding:26px 22px}
  .footer-bottom{justify-content:center;text-align:center}
}

/* ---------- Lien d’évitement (accessibilité clavier) ---------- */
.skip-link{
  position:absolute;left:12px;top:-70px;z-index:200;
  background:var(--blue-500);color:#fff;
  font-family:var(--font-head);font-size:.85rem;font-weight:700;
  padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0;color:#fff}

/* Carte cliquable (grille des services) */
a.card{display:block;color:inherit}
a.card:hover{color:inherit}
a.card .card-num{transition:color .3s var(--ease)}
a.card:hover .card-num{color:rgba(47,139,255,.45)}

/* ---------- Panneau « premier échange offert » (page contact) ---------- */
.promise{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid rgba(47,139,255,.30);
  background:linear-gradient(155deg,rgba(0,102,249,.22),rgba(0,102,249,.04));
  padding:30px 28px;
}
.promise::before{
  content:"";position:absolute;inset:auto -30% -70% -30%;height:120%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(47,139,255,.21), transparent 70%);
  pointer-events:none;
}
.promise > *{position:relative}
.promise .eyebrow{margin-bottom:16px}
.promise h3{margin-bottom:10px;font-size:1.2rem}
.promise p{margin:0;font-size:.92rem;color:#C6D8F8}

/* ---------- Pages légales ---------- */
.legal{max-width:74ch}
.legal h2{
  font-size:clamp(1.15rem,2vw,1.4rem);
  margin:44px 0 14px;padding-top:26px;
  border-top:1px solid var(--border);
}
.legal h2:first-of-type{margin-top:8px;padding-top:0;border-top:0}
.legal h3{
  font-size:1rem;font-weight:700;color:var(--blue-300);
  margin:28px 0 10px;
}
.legal p{font-size:.97rem;line-height:1.75;color:var(--text);margin-bottom:1.1em}
.legal a{color:var(--blue-300);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--white)}
.legal strong{color:var(--white);font-weight:600}
.legal .card-list{margin:0 0 1.4em}
.legal .card-list li{font-size:.97rem;color:var(--text)}
.legal-intro{
  font-size:1.05rem !important;color:var(--muted) !important;
  padding-bottom:8px;
}
.legal-note{font-size:.9rem !important;color:var(--muted) !important}
.legal-updated{
  margin-top:48px;padding-top:22px;
  border-top:1px solid var(--border);
  font-size:.85rem !important;color:var(--muted-2) !important;
}

/* ==========================================================================
   14. PORTFOLIO
   --------------------------------------------------------------------------
   Chaque projet porte ses couleurs, posées par le générateur sur .project :
     --ac    couleur d’accent, éclaircie si besoin pour rester lisible
     --pc    couleur principale de la marque
     --tint  la principale en transparence, pour les fonds de visuel
   ========================================================================== */

/* ---------- Hero pleine largeur ---------- */
.pj-hero{
  position:relative;
  min-height:clamp(360px,50vw,540px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.pj-hero-bg{position:absolute;inset:0}
.pj-hero-bg img{width:100%;height:100%;object-fit:cover}
.pj-hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--navy-850) 2%,rgba(10,16,34,.88) 42%,rgba(10,16,34,.46) 82%),
    linear-gradient(to right,rgba(10,16,34,.9) 4%,rgba(10,16,34,.34) 58%,transparent 84%);
}
.pj-hero-in{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(56px,8vw,90px);
  padding-bottom:clamp(30px,4vw,48px);
}
.pj-no{
  font-family:var(--font-head);
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ac);margin:0 0 14px;font-variant-numeric:tabular-nums;
}
.pj-hero-in h1{
  font-size:clamp(2.3rem,6.4vw,4.6rem);
  letter-spacing:-.042em;line-height:.98;margin-bottom:18px;
}
.pj-tagline{
  font-size:clamp(.98rem,1.5vw,1.15rem);line-height:1.6;
  color:#D6E1F2;max-width:62ch;margin:0;
}
.pj-facts{
  display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
}
.pj-facts > div{
  padding:18px 32px 0 0;margin-right:32px;
  border-right:1px solid rgba(255,255,255,.13);
}
.pj-facts > div:last-child{border-right:0;margin-right:0}
.pj-facts dt{
  font-family:var(--font-head);
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:6px;
}
.pj-facts dd{margin:0;font-size:.92rem;color:#EAF1FB}

/* ---------- Onglets collants ---------- */
.pj-tabs{
  position:sticky;top:var(--header-h);z-index:50;
  background:rgba(13,20,40,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.pj-tabs .container{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.pj-tabs .container::-webkit-scrollbar{display:none}
.pj-tabs a{
  position:relative;padding:16px 20px;white-space:nowrap;
  font-family:var(--font-head);font-size:.86rem;font-weight:600;
  color:var(--muted);transition:color .2s var(--ease);
}
.pj-tabs a:hover{color:var(--white)}
.pj-tabs a[aria-current]{color:var(--white)}
.pj-tabs a[aria-current]::after{
  content:"";position:absolute;left:20px;right:20px;bottom:-1px;
  height:2px;border-radius:2px;background:var(--ac);
}

/* ---------- Corps de projet ---------- */
.pj-sec{
  display:flex;align-items:baseline;gap:13px;
  font-family:var(--font-head);
  font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 16px;
}
.pj-sec i{font-style:normal;font-size:.7rem;color:var(--ac);font-variant-numeric:tabular-nums}
.pj-cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,60px);
  margin-bottom:clamp(34px,5vw,52px);
}
.pj-cols p{font-size:.98rem;line-height:1.78;color:var(--text);margin:0}
.pj-note{font-size:.98rem;line-height:1.78;color:var(--text);max-width:72ch;margin:0 0 24px}
.project .card-list li::before{border-color:var(--ac)}
.project .card-list{margin-top:0}
.pj-rule{height:1px;background:var(--border);margin:clamp(38px,5vw,58px) 0}

.pj-kpi{
  display:inline-flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 30px;margin-bottom:clamp(34px,5vw,50px);
}
.pj-kpi b{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1;letter-spacing:-.03em;
  color:var(--ac);
}
.pj-kpi span{font-size:.93rem;color:var(--muted)}

.pj-pull{
  font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.58;letter-spacing:-.015em;
  color:var(--white);font-weight:500;max-width:76ch;
  margin:clamp(30px,4vw,44px) 0;
}
.pj-pull::before{
  content:"";display:block;width:48px;height:3px;border-radius:3px;
  background:var(--ac);margin-bottom:24px;
}

/* ---------- Galeries : les formats sont très variés, on ne recadre jamais ---------- */
.gal{display:grid;gap:16px;margin-bottom:28px}
.gal-2{grid-template-columns:1fr 1fr}
.gal-3{grid-template-columns:repeat(3,1fr)}
.shot{margin:0}
.shot img{
  display:block;
  /* la boite epouse exactement l image : indispensable pour que le rayon
     des coins tombe pile sur ceux qui sont incrustes dans la photo */
  width:auto;max-width:100%;
  max-height:620px;
  margin-inline:auto;
  border-radius:var(--r-lg);
}
.gal-2 .shot img,.gal-3 .shot img{max-height:460px}
.shot figcaption{
  font-size:.79rem;line-height:1.45;color:var(--muted-2);
  padding:12px 4px 0;
  text-align:center;
}

/* ---------- Appel à l’action et projet suivant ---------- */
.pj-cta{margin-top:clamp(20px,3vw,32px)}
.pj-next{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-xl);border:1px solid var(--border);
  min-height:210px;margin-top:clamp(28px,4vw,42px);
  transition:border-color .35s var(--ease);
}
.pj-next:hover{border-color:var(--ac)}
.pj-next > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.pj-next:hover > img{transform:scale(1.05)}
.pj-next-veil{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(10,16,34,.95),rgba(10,16,34,.5));
}
.pj-next-in{
  position:relative;z-index:2;display:block;
  padding:clamp(26px,4vw,40px);
}
.pj-next-k{
  display:block;font-family:var(--font-head);
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px;
}
.pj-next-h{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:-.035em;color:var(--white);
}
.pj-next .link-arrow{margin-top:12px;color:var(--ac)}
.pj-next:hover .link-arrow svg{transform:translateX(5px)}

/* ---------- La grille des projets ---------- */
.pj-stats{
  display:flex;gap:42px;flex-wrap:wrap;
  margin-top:38px;padding-top:32px;
  border-top:1px solid var(--border);
  justify-content:center;
}
.pj-stats b{
  display:block;font-family:var(--font-head);font-weight:900;
  font-size:1.9rem;letter-spacing:-.03em;line-height:1;
  color:var(--white);margin-bottom:6px;
}
.pj-stats span{font-size:.84rem;color:var(--muted-2)}

.pj-grid{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,30px)}
.pj-card-media{background:var(--pc)}
.pj-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.pj-card-no{
  position:absolute;top:16px;left:18px;z-index:3;
  font-family:var(--font-head);font-size:.74rem;font-weight:800;letter-spacing:.14em;
  color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums;
}
.pj-card .work-cat{left:auto;right:14px}
.pj-dots{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:5px}
.pj-dots i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.45)}
.pj-card-sector{font-size:.82rem !important;color:var(--muted-2) !important;margin-bottom:12px !important}
.pj-card .link-arrow{margin-top:6px;color:var(--ac)}
.pj-card:hover .link-arrow svg{transform:translateX(4px)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .gal-3{grid-template-columns:1fr 1fr}
}
@media (max-width:840px){
  .pj-cols{grid-template-columns:1fr;gap:30px}
  .gal-2,.gal-3{grid-template-columns:1fr}
  .gal-2 .shot img,.gal-3 .shot img{max-height:560px}
  .pj-grid{grid-template-columns:1fr}
  .pj-facts > div{padding-right:24px;margin-right:24px}
  .pj-hero{min-height:340px}
}
@media (max-width:640px){
  .pj-facts{flex-direction:column;gap:0}
  .pj-facts > div{border-right:0;margin-right:0;padding-right:0}
  .pj-stats{gap:28px}
  .pj-kpi{width:100%;flex-direction:column;gap:6px}
  .pj-tabs a{padding:14px 15px;font-size:.8rem}
}

/* Au survol, chaque réseau reprend sa propre couleur : on reconnaît la
   plateforme avant même de lire l’icône. Le bleu générique du site ne
   servait à rien ici, puisque les quatre boutons se ressemblaient. */
.socials .social-ig:hover{
  background:radial-gradient(circle at 28% 108%,
    #FDD867 0%, #FD9C3B 20%, #FA5245 42%, #D92E7F 62%, #8B35CE 82%, #4C5FD7 100%);
  border-color:transparent;
}
.socials .social-wa:hover{background:#25D366;border-color:transparent}
.socials .social-fb:hover{background:#1877F2;border-color:transparent}
/* TikTok est noir sur blanc — sur notre fond bleu nuit, le noir seul
   passerait inaperçu. On garde donc le noir de la marque, encadré de son
   cyan et de son rouge, comme sur le logo. */
.socials .social-tt:hover{
  background:#010101;
  border-color:transparent;
  box-shadow:-3px -3px 0 -1px #25F4EE, 3px 3px 0 -1px #FE2C55;
}
.socials{flex-wrap:wrap}

/* ---------- Visuel plafonné (logo transparent) et carte à visuel libre ---------- */
/* Plafond de hauteur optionnel : coverMax / logoMax dans realisations.json.
   Aucun projet ne s en sert actuellement, le crochet reste disponible. */
.gal[style*="--gal-max"] .shot img{max-height:var(--gal-max)}

/* Une carte dont le visuel est un logo transparent : on le montre en entier,
   posé sur la couleur de marque, plutôt que recadré en 4:3. */
.pj-card-media--libre img{
  object-fit:contain !important;
  padding:11%;
  background:var(--pclair,var(--pc));
}