/* =========================================================
   VEFE — Refonte home & layout (2026).
   Direction A « Clarté » : beaucoup de blanc, très aéré,
   arrondis généreux, vert VEFE en accent. Typo Hanken Grotesk.
   Issu de la maquette Claude (vefe-home-offline.html), adapté
   en PHP/CI (header.php, footer.php, home.php) par Jérôme/Claude.
   ========================================================= */

/* ---------- polices auto-hébergées (Hanken Grotesk, variable 400-800) ---------- */
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/hanken-grotesk-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/hanken-grotesk-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/hanken-grotesk-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- variables (Direction A) ---------- */
.v26{
  --green:#7DB01F;
  --green-deep:#557D12;
  --green-soft:#EFF5E1;
  --green-tint:#F7FAEE;

  --cta:#C75B39;
  --cta-deep:#A8472B;

  --ink:#1B2113;
  --ink-2:#5C6450;
  --ink-3:#8A917E;
  --bg:#FFFFFF;
  --bg-alt:#F7F8F3;
  --bg-band:#F2F5EA;
  --line:#E7E9DF;
  --line-2:#EFF0E9;

  --radius:22px;
  --radius-sm:13px;
  --radius-pill:999px;

  --maxw:1200px;
  --density:1;
  --gut:calc(28px * var(--density));

  --font:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-head:var(--font);
  --head-weight:800;
  --head-tracking:-0.02em;

  --shadow-sm:0 1px 2px rgba(27,33,19,.05), 0 2px 8px rgba(27,33,19,.04);
  --shadow:0 6px 28px rgba(27,33,19,.08);
  --shadow-lg:0 18px 50px rgba(27,33,19,.12);
}

.v26{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.v26 *{box-sizing:border-box}
/* critical.css impose un padding-top (98px / 124px) sur .main-content pour l'ancien header
   fixe qui recouvrait le contenu. Le header v26 est en position:sticky (pas fixed), ce padding
   ne sert donc plus qu'a creer un bandeau blanc entre le header et le contenu. */
.v26 .main-content{padding-top:0}
.v26 img{max-width:100%;display:block}
.v26 a{color:inherit;text-decoration:none}
.v26 button{font-family:inherit;cursor:pointer}
.v26 h1,.v26 h2,.v26 h3,.v26 h4{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);line-height:1.08;margin:0}
.v26 p{margin:0}

.v26 .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.v26 .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);margin:0 0 14px}
.v26 .section{padding:calc(76px * var(--density)) 0}
.v26 .section--alt{background:var(--bg-alt)}
.v26 .muted{color:var(--ink-2)}

/* ---------- boutons ---------- */
.v26 .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:var(--radius-pill);font-weight:700;font-size:16px;border:1.5px solid transparent;transition:transform .15s ease, background .15s ease, box-shadow .15s ease;white-space:nowrap}
.v26 .btn--primary{background:var(--green);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--green) 35%,transparent)}
.v26 .btn--primary:hover{transform:translateY(-2px);background:var(--green-deep)}
.v26 .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.v26 .btn--ghost:hover{border-color:var(--green);color:var(--green-deep)}
.v26 .btn--devis{background:var(--cta);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--cta) 36%,transparent)}
.v26 .btn--devis:hover{transform:translateY(-2px);background:var(--cta-deep)}
.v26 .btn--lg{padding:17px 30px;font-size:17px}
.v26 .btn .arr{font-size:18px;line-height:1;transition:transform .15s}
.v26 .btn:hover .arr{transform:translateX(3px)}
/* variantes fond fonce/colore (2026-08-11, page.php) : .btn--ghost (texte var(--ink)) est illisible
   sur fond sombre (.side-cta, .edito-cta__box) - deux nouvelles variantes suivant la meme convention
   BEM que .btn--primary/--ghost/--devis. */
.v26 .btn--white{background:#fff;color:var(--green-deep)}
.v26 .btn--white:hover{transform:translateY(-2px);background:var(--green-deep);color:#fff}
.v26 .btn--outline-white{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.v26 .btn--outline-white:hover{background:#fff;color:var(--green-deep);border-color:#fff}

/* ---------- barre utilitaire ---------- */
.v26 .utility{background:var(--ink);color:#fff;font-size:13.5px}
.v26 .utility .wrap{display:flex;align-items:center;justify-content:space-between;height:38px}
.v26 .utility a{display:inline-flex;align-items:center;gap:7px;opacity:.85;transition:opacity .15s}
.v26 .utility a:hover{opacity:1}
.v26 .utility .u-left{display:flex;gap:26px}
.v26 .utility .u-right{display:flex;gap:22px}
.v26 .utility .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
/* Bandeau telephone mobile-only, au-dessus de la ligne logo/CTA/burger. Sur desktop
   le telephone vit deja a cote du bouton devis (.nav-phone), donc masque ici. */
.v26 .mobile-phone-bar{display:none}

/* ---------- header / nav ---------- */
/* Reset explicite : critical.css (ancien design) definit deja un .header global
   (padding:32px 0 16px, position:absolute...) que .v26 .header ne surchargeait pas
   pour le padding precis - consequence : un vide de 32px au-dessus du contenu
   (visible surtout sur mobile, au-dessus du bandeau telephone). Meme pattern que
   la correction deja faite sur .hero. */
.v26 .header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:0;box-shadow:none}
.v26 .header .wrap{display:flex;align-items:center;gap:28px;height:84px}
.v26 .brand{display:flex;align-items:center;flex-shrink:0}
/* Logo agrandi (retour Christine, "Suivi des Bugs" : "logo VEFE trop petit" dans la barre fixe). */
.v26 .brand img{height:56px;width:auto}
.v26 .nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.v26 .navitem{position:static}
.v26 .navtop{position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 13px;border-radius:10px;font-weight:600;font-size:15.5px;color:var(--ink);transition:background .15s,color .15s;cursor:pointer}
.v26 .navtop:hover{background:var(--green-soft);color:var(--green-deep)}
.v26 .navtop.is-portal{font-weight:700}
.v26 .navtop .caret{display:inline-flex;opacity:.55;transition:transform .18s}
.v26 .navitem:hover .navtop .caret{transform:rotate(180deg)}
.v26 .navtop .caret svg{width:12px;height:12px}

/* display:block explicite (2026-08-11) : app.css (ajoute au layout le 2026-08-10 pour corriger
   /blog) definit son propre composant ".mega{display:none}" (ligne 86, non scope, sans lien avec
   le mega-menu v26 - nom de classe en collision) - .v26 .mega ne fixait jamais "display" lui-meme
   (le show/hide se fait via opacity/visibility/pointer-events ci-dessous), donc le display:none
   d'app.css restait actif en permanence et bloquait l'ouverture du mega-menu au survol (retour
   Jerome). Specificite egale (.v26 .mega = 2 classes) mais il faut le declarer explicitement
   puisque la propriete n'etait sinon jamais disputee entre les deux regles. */
.v26 .mega{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 22px 40px rgba(27,33,19,.10);opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .16s ease, transform .16s ease;z-index:60}
/* pont invisible : comble l'espace entre le lien de nav (centre verticalement
   dans un header de 84px) et le haut du mega (colle au bas du header). Sans
   ca, la souris quitte la zone survolee avant d'atteindre le panneau et le
   menu se referme (bug remonte par Jerome). Fait partie du sous-arbre DOM de
   .navitem donc il maintient .navitem:hover pendant la traversee. */
.v26 .mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:30px}
.v26 .navitem:hover .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.v26 .mega-inner{max-width:var(--maxw);margin:0 auto;padding:30px 32px;display:grid;grid-template-columns:1.35fr 1fr;gap:44px}
/* menu Destinations sans la colonne vignettes (commentee dans header.php, 2026-10-15) : la colonne pays prend toute la largeur */
.v26 .mega-inner > div:only-child{grid-column:1 / -1}
.v26 .mega-inner--small{grid-template-columns:1fr;max-width:520px;margin:0;padding:22px 26px}
.v26 .mega--small{right:auto;width:auto;min-width:420px}
.v26 .navitem--mini{position:relative}
.v26 .navitem--mini .mega{left:auto;right:0;top:calc(100% + 0px)}
.v26 .mega-ey{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.v26 .mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px}
.v26 .mega-cols--2{grid-template-columns:repeat(2,1fr)}
.v26 .mega-cols--4{grid-template-columns:repeat(4,1fr)}
.v26 .mega-cols a{padding:8px 10px;border-radius:8px;font-size:15px;font-weight:600;color:var(--ink-2);transition:background .12s,color .12s}
.v26 .mega-cols a:hover{background:var(--green-soft);color:var(--green-deep)}
.v26 .mega-all{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;color:var(--cta);font-size:14.5px}
.v26 .mega-all .arr{transition:transform .15s}
.v26 .mega-all:hover .arr{transform:translateX(4px)}
.v26 .mega-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-left:1px solid var(--line);padding-left:40px}
/* align-items:stretch explicite (2026-08-11) : app.css definit ".nav a, .nav .nav-item{display:flex;
   align-items:center;...}" (composant nav "Direction B/Thames" jamais utilise sur VEFE) - .mega-card
   est un <a> imbrique dans .nav (nav > navitem > mega > ... > mega-card), donc cette regle generique
   s'applique aussi a lui et ecrase le align-items:stretch par defaut necessaire pour que .mc-media
   (aspect-ratio 16/10, sans largeur explicite) recoive la largeur de la carte - consequence : la
   miniature Londres/Rome du mega-menu s'effondrait a 0x0 (retour Jerome). Meme famille de collision
   que .mega{display:none} et h2.title{color:...} deja neutralisees plus haut. */
.v26 .mega-card{display:flex;flex-direction:column;align-items:stretch;gap:3px}
.v26 .mega-card .mc-media{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:5px}
.v26 .mega-card b{font-size:14.5px}
.v26 .mega-card span{font-size:12.5px;color:var(--ink-3);font-weight:600}
.v26 .mega-note{border-left:1px solid var(--line);padding-left:40px;display:flex;flex-direction:column;gap:12px;color:var(--green-deep)}
.v26 .mega-note p{font-size:14.5px;color:var(--ink-2);line-height:1.5}

.v26 .nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.v26 .iconbtn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);color:var(--ink-2);display:grid;place-items:center;transition:border-color .15s,color .15s}
.v26 .iconbtn:hover{border-color:var(--green);color:var(--green-deep)}
.v26 .nav-phone{display:flex;flex-direction:column;line-height:1.1;text-align:right;position:relative}
.v26 .nav-phone b{font-size:16px;font-weight:800;white-space:nowrap}
/* Statut d'ouverture "a la Google" sous le telephone (demande Jerome 2026-08-28), cf. script en
   fin de header.php pour le calcul Ouvert/Ferme. .nav-hours est un <button> (pas un lien tel:,
   contrairement au numero juste au-dessus) pour ouvrir/fermer .nav-hours-panel sans declencher
   d'appel. */
.v26 .nav-hours{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);font-weight:600;background:none;border:none;padding:0;cursor:pointer;justify-content:flex-end;margin-left:auto}
.v26 .nav-hours:hover{color:var(--green-deep)}
.v26 .nav-hours-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--ink-3)}
.v26 .nav-hours-dot.is-open{background:var(--green)}
.v26 .nav-hours-dot.is-closed{background:#c0392b}
.v26 .nav-hours-panel{position:absolute;top:100%;right:0;margin-top:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:14px 16px;z-index:30;min-width:230px;text-align:left}
.v26 .nav-hours-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:5px 0;color:var(--ink-2)}
.v26 .nav-hours-row+.nav-hours-row{border-top:1px solid var(--line)}
.v26 .nav-hours-row span:first-child{font-weight:700;color:var(--ink)}

/* Logo agrandi 46 -> 60px et barre 64 -> 76px (retour client 2026-10-15 : logo trop petit) ; les
   decalages sticky qui en dependent (.prod-jump top, .prod-aside top) sont ajustes de +12px. */
.v26 .header.compact .wrap{height:76px}
.v26 .header.compact .brand img{height:60px}
.v26 .header.compact .navtop{padding-top:8px;padding-bottom:8px}

.v26 .burger{display:none;position:relative;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg)}
.v26 .burger span{position:absolute;left:50%;top:50%;width:18px;height:2px;margin-top:-1px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
/* Les 3 barres sont centrees puis decalees en haut/bas ; l'ouverture les fait pivoter
   en croix (rotation 45/-45) et efface la barre du milieu — animation burger -> X classique. */
.v26 .burger span:nth-child(1){transform:translate(-50%,-6px)}
.v26 .burger span:nth-child(2){transform:translate(-50%,0)}
.v26 .burger span:nth-child(3){transform:translate(-50%,6px)}
.v26 .burger.is-open span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
.v26 .burger.is-open span:nth-child(2){opacity:0}
.v26 .burger.is-open span:nth-child(3){transform:translate(-50%,0) rotate(-45deg)}
/* top pilote en JS (v26MobileNav.style.top) pour coller exactement au bas du header,
   quel que soit son etat (normal/compact) - un inset fixe en dur se decalait selon les
   ecrans. */
.v26 .mobile-nav{display:none;position:fixed;top:84px;right:0;bottom:0;left:0;background:var(--bg);z-index:55;overflow-y:auto;padding:8px 20px 40px}
.v26 .mobile-nav.is-open{display:block}
.v26 .mobile-nav a{display:block;padding:14px 4px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:16px}

/* ---------- hero ---------- */
/* Reset explicite : critical.css (ancien design) definit deja un .hero global
   (height:calc(100vh - 200px), display:flex, align-items:flex-end, padding, width,
   margin-left...) que .v26 .hero ne surchargeait pas pour ces proprietes precises -
   consequence : le haut du H1/badge etait rogne (aligne en bas d'une boite a hauteur
   fixe, overflow hidden). On neutralise ici tout l'heritage de l'ancien .hero. */
/* overflow:visible (2026-08-06, retour Jerome) : passait a "hidden" en heritage du reset ci-dessus,
   sans raison propre a ce design (pas d'element decoratif a rogner dans ce .hero) - consequence :
   les dropdowns Destination/Theme du moteur de recherche (.selector-panel), positionnes en absolute
   dans .hero, se faisaient rogner/passaient visuellement sous le bandeau confiance (.trust) juste en
   dessous des qu'ils depassaient le bas du hero. */
.v26 .hero{position:relative;background:var(--bg);overflow:visible;display:block;height:auto;max-height:none;min-height:0;padding:0;width:100%;margin-left:0;align-items:stretch;z-index:auto}
.v26 .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:calc(64px*var(--density));padding-bottom:calc(64px*var(--density))}
.v26 .hero-badge{display:inline-flex;align-items:center;gap:9px;background:var(--green-soft);color:var(--green-deep);font-weight:700;font-size:13.5px;padding:8px 15px;border-radius:var(--radius-pill);margin-bottom:22px}
.v26 .hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.v26 .hero h1{font-size:clamp(32px,4vw,56px);margin-bottom:20px;text-wrap:balance}
.v26 .hero h1 em{font-style:normal;color:var(--green-deep)}
.v26 .hero-sub{font-size:19px;color:var(--ink-2);max-width:30em;margin-bottom:30px}
.v26 .hero-sub p{margin:0}
.v26 .hero-media{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px;box-shadow:var(--shadow)}
/* Carousel hero (bloc 2 admin, media du bloc en position 2 - cf. home.php) : memes classes
   que les galeries d'images du reste du site (.image_gallery .aMedia), mais initialisees a
   part dans main_js.js (reglages dedies : rythme plus lent, dots) plutot que par l'init
   generique partagee par les galeries produit. On force le remplissage en hauteur/largeur de
   .hero-media, comme .card-media ailleurs sur la home. */
.v26 .hero-media.image_gallery,
.v26 .hero-media .aMedia,
.v26 .hero-media .slick-list,
.v26 .hero-media .slick-track,
.v26 .hero-media .slick-slide,
.v26 .hero-media .slick-slide > div,
.v26 .hero-media .f-carousel__slide{height:100%}
.v26 .hero-media .f-carousel__slide img{width:100%;height:100%;object-fit:cover;display:block}

/* Legere respiration/vignette (Ken Burns + gradient bas) pour un rendu moins statique, et
   pour garder les fleches/dots lisibles quelle que soit la luminosite de la photo. Demande
   Jerome 2026-08-14 ("ameliore le rendu du carousel"). */
.v26 .hero-media.image_gallery::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(20,26,12,0) 62%,rgba(20,26,12,.4) 100%);pointer-events:none}
/* style_js.css impose ".image_gallery .aMedia:not(.media_left):not(.media_right){margin:-8px 0
   !important}" - une astuce de compensation pensee pour la mise en page flex du bloc gallery
   GENERIQUE (media_left/media_right, cf. website_page_block_display()), que notre carousel
   sur-mesure (hauteur fixe 100%, jamais ces classes media_left/right) ne veut pas heriter : ce
   -8px laissait une bande vide (fond gris/degrade visible) en bas du visuel. Neutralise ici
   uniquement pour .hero-media (specificite superieure a la regle d'origine pour gagner quel
   que soit l'ordre de chargement des feuilles de style). Signale Jerome 2026-08-14. */
.v26 .hero-media.image_gallery .aMedia:not(.media_left):not(.media_right){margin:0 !important}
@keyframes heroKenBurns{from{transform:scale(1)}to{transform:scale(1.07)}}
.v26 .hero-media .slick-active img{animation:heroKenBurns 5.2s ease-in-out forwards}
@media(prefers-reduced-motion:reduce){.v26 .hero-media .slick-active img{animation:none}}

/* Fleches : on repart de zero plutot que du theme par defaut de slick (icone via police
   slick.woff) pour un rendu coherent avec le reste du site (chevrons traces en CSS, meme
   esprit que les chevrons SVG du moteur de recherche juste a cote). Masquees par defaut,
   apparaissent au survol du visuel. */
.v26 .hero-media .slick-arrow{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);border:0;box-shadow:var(--shadow-sm);display:block;z-index:3;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .16s,background .16s,transform .16s}
.v26 .hero-media:hover .slick-arrow{opacity:1}
.v26 .hero-media .slick-arrow:hover{background:#fff}
.v26 .hero-media .slick-arrow:before{content:none}
/* Chevron en SVG inline plutot qu'en bordures+rotation : la version precedente (deux bordures
   d'un carre pivote a 45deg) donnait une forme asymetrique dont le point de la fleche n'est
   pas au centre geometrique de sa propre boite. Centrage par position absolue (et non
   display:grid + place-items) : le bouton contient aussi un texte cache ("Previous"/"Next",
   insere par slick pour l'accessibilite) qui devenait un 2e item de la grille et faussait le
   centrage vertical malgre place-items:center. display:block + le ::after positionne en
   absolute/translate(-50%,-50%) ignore ce texte et se cale uniquement sur la boite du bouton
   (deja position:absolute via slick-theme.css, donc deja bloc de positionnement pour son
   propre pseudo-element). Signale Jerome 2026-08-14. */
.v26 .hero-media .slick-arrow:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;background-repeat:no-repeat;background-position:center;background-size:contain}
.v26 .hero-media .slick-prev{left:16px}
.v26 .hero-media .slick-prev:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2113' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
.v26 .hero-media .slick-next{right:16px}
.v26 .hero-media .slick-next:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2113' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}
.v26 .hero-media .slick-arrow.slick-disabled{display:none}

/* Dots : petites puces qui s'allongent en pilule sur la diapo active (plus discret que le
   theme slick par defaut, coherent avec --radius-pill utilise partout ailleurs). */
.v26 .hero-media .slick-dots{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;justify-content:center;gap:7px;list-style:none;margin:0;padding:0}
.v26 .hero-media .slick-dots li{width:auto;height:auto;margin:0}
.v26 .hero-media .slick-dots li button{width:8px;height:8px;padding:0;border:0;border-radius:var(--radius-pill);background:rgba(255,255,255,.55);font-size:0;line-height:0;cursor:pointer;transition:background .16s,width .16s}
.v26 .hero-media .slick-dots li button:before{content:none}
.v26 .hero-media .slick-dots li.slick-active button{width:22px;background:#fff}
@media(max-width:768px){
  .v26 .hero-media .slick-arrow{width:36px;height:36px}
  .v26 .hero-media .slick-dots{bottom:12px}
}

.v26 .search{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-top:8px}
.v26 .search-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink-2);margin:2px 4px 14px;letter-spacing:.01em}
.v26 .search-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
/* Bouton "Cycle" masque (decision Jerome 2026-07-26, cf. home.php) : passage a 2 colonnes
   tant que le 3e bouton reste cache. A retirer si le bouton Cycle est reactive. */
.v26 .search-grid--2{grid-template-columns:1fr 1fr}
.v26 .selector{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px;background:var(--bg);display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s;cursor:pointer;text-align:left;width:100%}
.v26 .selector:hover{border-color:var(--green);box-shadow:0 4px 14px color-mix(in srgb,var(--green) 16%,transparent)}
.v26 .selector .s-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.v26 .selector .s-ico{width:22px;height:22px;display:grid;place-items:center;color:var(--green-deep)}
.v26 .selector .s-val{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:600;color:var(--ink)}
.v26 .selector .s-val .chev{color:var(--ink-3);font-size:13px}
.v26 .search-go{margin-top:12px;display:flex}
.v26 .search-go .btn{flex:1;justify-content:center}

/* ---------- bandeau confiance ---------- */
.v26 .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-band)}
.v26 .trust .wrap{padding:calc(34px*var(--density)) 32px}
.v26 .trust-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;justify-content:center;justify-items:center;text-align:center;max-width:900px;margin:0 auto}
.v26 .stat{display:flex;flex-direction:column;gap:4px;position:relative;padding-left:20px}
.v26 .stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--green)}
.v26 .stat b{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1}
.v26 .stat span{font-size:14.5px;color:var(--ink-2);font-weight:600}
/* chiffres cles (bloc 3) re-introduits le 2026-08-14 (demande Jerome, "on a perdu les
   chiffres") au-dessus de .trust-agr (bloc 4, "Agréé & garanti") - separateur pointille
   restaure entre les deux. */
.v26 .trust-agr{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px dashed var(--line)}
.v26 .trust-agr .lbl{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.v26 .agr-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px;font-weight:700;font-size:13.5px;color:var(--ink)}
.v26 .agr-chip .tick{color:var(--green-deep)}
/* Vrais logos (retour Sophie 2026-09-18, "visuel pas assez percutant") a la place des chips texte
   .agr-chip ci-dessus, conservees en repli pour tout libelle admin non reconnu (cf. home.php). */
.v26 .agr-logo{display:inline-flex;align-items:center;height:38px}
.v26 .agr-logo img{height:100%;width:auto;max-width:130px;object-fit:contain;display:block}
@media(max-width:640px){.v26 .agr-logo{height:30px}.v26 .agr-logo img{max-width:100px}}

/* ---------- entete de section ---------- */
.v26 .sec-head{max-width:42em;margin-bottom:40px}
.v26 .sec-head h2{font-size:clamp(26px,3vw,40px);margin-bottom:12px;text-wrap:balance}
.v26 .sec-head p{font-size:18px;color:var(--ink-2)}
.v26 .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- 3 portails ---------- */
.v26 .portals{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Carte "Par cycle" masquee (decision Jerome 2026-07-26, cf. home.php) : passage a 2 colonnes
   tant que la 3e carte reste cachee. A retirer si la carte est reactivee. */
.v26 .portals--2{grid-template-columns:repeat(2,1fr)}
.v26 .portal{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:30px;display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.v26 .portal:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.v26 .portal-ico{width:48px;height:48px;border-radius:14px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;margin-bottom:2px}
.v26 .portal h3{font-size:23px}
/* .portal n'est plus un <a> unique (demande Jerome 2026-08-14 : chaque puce doit etre un vrai
   lien vers son pays/theme, or un <a> ne peut pas en contenir d'autres) : le h3 porte desormais
   le lien "stretched" (::after en position:absolute;inset:0) qui rend toute la carte cliquable
   comme avant (vers la page destinations/themes), tandis que chaque <li> a> reste cliquable
   individuellement par-dessus grace a un z-index superieur. */
.v26 .portal h3 a{color:inherit;text-decoration:none}
.v26 .portal h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.v26 .portal .q{font-size:15px;color:var(--green-deep);font-weight:700}
.v26 .portal ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.v26 .portal li{font-size:15px;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start}
.v26 .portal li::before{content:"";flex-shrink:0;margin-top:8px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.v26 .portal li a{position:relative;z-index:2;color:inherit;text-decoration:none}
.v26 .portal li a:hover{text-decoration:underline}
/* Liste pays/themes en scroll vertical (2026-08-15, demande Jerome : "transforme la liste des
   pays et la liste des themes en liste verticale scroll, height max 200px, design la scrollbar")
   - position:relative + z-index:2 (meme technique que .portal li a) pour que la molette/le
   drag de la scrollbar restent au-dessus du lien "stretched" du h3 (::after, z-index:1) qui
   couvre toute la carte. */
.v26 .portal-scroll{max-height:200px;overflow-y:auto;position:relative;z-index:2;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--green) var(--green-soft)}
.v26 .portal-scroll::-webkit-scrollbar{width:6px}
.v26 .portal-scroll::-webkit-scrollbar-track{background:var(--green-soft);border-radius:99px}
.v26 .portal-scroll::-webkit-scrollbar-thumb{background:var(--green);border-radius:99px}
.v26 .portal-scroll::-webkit-scrollbar-thumb:hover{background:var(--green-deep)}
.v26 .portal .go{margin-top:auto;padding-top:14px;font-weight:700;color:var(--green-deep);display:inline-flex;align-items:center;gap:8px}
.v26 .portal .go .arr{transition:transform .15s}
.v26 .portal:hover .go .arr{transform:translateX(4px)}

/* ---------- best-sellers ---------- */
.v26 .bs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.v26 .bs-foot{text-align:right;margin-top:28px}
.v26 .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.v26 .card{border-radius:var(--radius);overflow:hidden;background:var(--bg);border:1px solid var(--line);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.v26 .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.v26 .card-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.v26 .card-flag{position:absolute;top:12px;left:12px;background:var(--bg);border-radius:var(--radius-pill);padding:6px 13px;font-size:13px;font-weight:700;box-shadow:var(--shadow-sm)}
/* Badges theme (Developpement durable/Nouveaute/Exclusivite, demande Jerome 2026-08-28) : images
   fournies telles quelles (petits rubans ~90x31px, deja mis en forme graphiquement - pas de fond
   ni de cadre a ajouter), empilees en haut A DROITE de la photo (top:right, pas left : .card-flag
   ci-dessus - le pays, sur les cartes best-sellers de la home - occupe deja le coin superieur
   gauche, cf. home.php). drop-shadow plutot que box-shadow pour ne pas ajouter de cadre
   rectangulaire visible sur les coins transparents du PNG. */
.v26 .card-badges{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:1}
.v26 .card-badge{display:block;height:26px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.v26 .card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.v26 .card-body h3{font-size:20px}
.v26 .card-meta{display:flex;gap:14px;font-size:13.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.v26 .card-meta span{display:inline-flex;align-items:center;gap:5px}
.v26 .card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px}
.v26 .card-price b{font-size:20px;font-weight:800}
.v26 .card-price small{font-size:12.5px;color:var(--ink-3);font-weight:600;display:block}
.v26 .card-foot .lnk{font-weight:700;color:var(--green-deep);font-size:14.5px;display:inline-flex;gap:6px;align-items:center}

/* "Selection du trimestre" en slider (2026-08-06, demande Jerome) : meme composant .card que les
   grilles pays/theme, mais en scroll horizontal avec snap plutot qu'en grille - .cards--slider
   n'affecte que ce contexte (grace au double selecteur), les grilles existantes (.cards seul)
   restent inchangees. */
/* padding vertical + marge negative egale (2026-08-28, "le mouse over sur la liste des voyages
   dans le carousel est coupe en haut et en bas") : overflow-x:auto force implicitement
   overflow-y a se comporter comme "auto" (regle CSS standard - un axe "visible" a cote d'un axe
   non-visible devient "auto"), ce qui coupe le lift + box-shadow de .card:hover (translateY(-4px)
   + --shadow-lg, qui s'etend bien au-dela de la carte). Le padding donne de la place AVANT le bord
   de clipping ; la marge negative de meme valeur annule son impact sur la mise en page (.bs-head/
   .bs-foot gardent le meme espacement qu'avant). */
.v26 .cards--slider{display:flex;grid-template-columns:none;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:36px 0 66px;margin:-36px 0 -66px}
.v26 .cards--slider::-webkit-scrollbar{display:none}
.v26 .cards--slider .card{flex:0 0 280px;scroll-snap-align:start}
.v26 .slider-nav{display:inline-flex;gap:8px;flex:0 0 auto}
.v26 .slider-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:border-color .14s,color .14s}
.v26 .slider-nav button:hover{border-color:var(--green);color:var(--green-deep)}
.v26 .slider-nav button:disabled{opacity:.35;cursor:default}
@media(max-width:640px){.v26 .cards--slider .card{flex-basis:240px}.v26 .bs-head{flex-wrap:wrap;gap:14px}}

/* ---------- temoignages ---------- */
.v26 .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.v26 .quote{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:18px}
.v26 .quote .stars{color:var(--green);font-size:15px;letter-spacing:2px}
.v26 .quote p{font-size:16.5px;line-height:1.5;color:var(--ink)}
.v26 .quote .who{display:flex;align-items:center;gap:13px;margin-top:auto}
.v26 .quote .ava{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--green-soft);position:relative}
.v26 .quote .ava img{width:100%;height:100%;object-fit:cover;display:block}
.v26 .quote .who b{display:block;font-size:15px;font-weight:800}
.v26 .quote .who span{font-size:13.5px;color:var(--ink-3);font-weight:600}
/* Carousel (2026-08-15, demande Jerome : "transforme en carousel") : meme mecanisme que
   .cards--slider (best-sellers) - scroll horizontal + snap, fleches JS, scrollbar masquee. Le
   header de section (.quotes-head) reprend le "sec-head + slider-nav" de .bs-head pour heberger
   les fleches, le sec-head d'origine (centre, sans fleches) reste utilise quand $aHomeTestimonial
   est trop court pour justifier un carousel (peu probable mais garde en fallback visuel). */
.v26 .quotes-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.v26 .quotes--slider{display:flex;grid-template-columns:none;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.v26 .quotes--slider::-webkit-scrollbar{display:none}
/* Largeur volontairement reduite a 320px (pas 360px) : demande Jerome 2026-08-15 : "doit couper
   comme les autres carousels, je ne dois pas voir le dernier temoignage en entier" - a 360px, 3
   cartes tenaient pile dans le .wrap desktop (aucune carte partielle visible = pas d'indice
   visuel de scroll) ; a 320px la 4e carte est toujours coupee, meme effet "peek" que
   .cards--slider (best-sellers, cf. plus haut). */
.v26 .quotes--slider .quote{flex:0 0 320px;scroll-snap-align:start}
@media(max-width:640px){.v26 .quotes--slider .quote{flex-basis:260px}.v26 .quotes-head{flex-wrap:wrap;gap:14px}}

/* Pagination de la page /temoignages (demande Jerome 2026-10-02, "listing des temoignages
   pagines") : seul listing du site avec une pagination serveur reelle (page/N), aucun autre
   gabarit existant a reprendre - pastilles rondes dans le meme esprit que .portal-scroll/.card
   (memes tokens de couleur que le reste du design 2026). */
.v26 .testi-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px;flex-wrap:wrap}
.v26 .testi-pagination__pages{display:flex;align-items:center;gap:6px}
.v26 .testi-pagination__page{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink-2);border:1px solid var(--line);text-decoration:none}
.v26 .testi-pagination__page:hover{border-color:var(--green)}
.v26 .testi-pagination__page.is-current{background:var(--green);border-color:var(--green);color:#fff}
.v26 .testi-pagination__nav{font-size:14px;font-weight:700;color:var(--green-deep);text-decoration:none;white-space:nowrap}
.v26 .testi-pagination__nav:hover{text-decoration:underline}

/* ---------- pourquoi vefe ---------- */
.v26 .why{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.v26 .pillar{padding:28px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--line)}
/* icone en float left a cote du titre (demande Jerome 2026-08-15), plus l'ancien empilement
   icone/titre/texte en colonne : .p-ico flotte, h3 vient a cote (padding-top pour un centrage
   vertical approximatif sur les 50px de l'icone), p passe en dessous via clear:both. */
.v26 .pillar .p-ico{width:50px;height:50px;border-radius:14px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;float:left;margin-right:14px}
.v26 .pillar h3{font-size:19px;padding-top:12px;margin:0}
.v26 .pillar p{font-size:15px;color:var(--ink-2);clear:both;margin-top:14px}

/* ---------- cta devis ---------- */
.v26 .cta{background:var(--ink);color:#fff;border-radius:var(--radius);overflow:hidden;position:relative}
.v26 .cta .inner{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:clamp(36px,4vw,58px);align-items:center}
.v26 .cta h2{font-size:clamp(26px,3vw,40px);color:#fff;margin-bottom:14px;text-wrap:balance}
.v26 .cta p{font-size:17px;color:rgba(255,255,255,.75);max-width:30em}
.v26 .cta .reassure{display:flex;gap:22px;margin-top:24px;flex-wrap:wrap}
.v26 .cta .reassure span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.9)}
.v26 .cta .reassure .tick{color:var(--green)}
.v26 .qform{background:var(--bg);border-radius:var(--radius-sm);padding:26px;color:var(--ink)}
.v26 .qform .ql{font-weight:800;font-size:18px;margin-bottom:4px}
.v26 .qform .qs{font-size:14px;color:var(--ink-2);margin-bottom:18px}
.v26 .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.v26 .field label{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.v26 .field .inp{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--ink);background:var(--bg);font-weight:600;display:flex;align-items:center;justify-content:space-between}
/* select natif (champ Destination du bandeau devis, cf. quote-cta.php) : meme habillage que
   .field .inp ci-dessus mais fleche en background-image (appearance:none). */
select.inp{width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238A917E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
select.inp:focus{outline:2px solid var(--green);outline-offset:1px}
/* input/textarea natifs du formulaire de devis (etape 2, quote-cta.php, 2026-08-14) : jusqu'ici
   .field .inp n'habillait que des <div> (maquette) et <select> (select.inp ci-dessus) - largeur
   100% pas heritee par defaut sur un <input>/<textarea>. */
.v26 .field input.inp,.v26 .field textarea.inp{width:100%;font-family:inherit}
.v26 .field input.inp:focus,.v26 .field textarea.inp:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.v26 .qform .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v26 .qform .btn{width:100%;justify-content:center;margin-top:6px}
.v26 .qform .alt{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:14px}
.v26 .qform .alt a{color:var(--green-deep);font-weight:700}
/* etapes 1/2 du formulaire de devis (2026-08-14) : .qstep[hidden] masque l'etape inactive
   (devis_go_step() dans app.js), .qactions aligne "Retour" (ghost) et "ENVOYER" (devis) cote a
   cote plutot qu'empiles en pleine largeur comme le bouton "Continuer" de l'etape 1. */
.v26 .qform .qactions{display:flex;gap:12px;margin-top:6px}
.v26 .qform .qactions .btn{width:auto;flex:1;margin-top:0}
/* Carte de remerciement apres envoi du devis (send_devis_form(), app.js) : .quote-thanks remplace
   le contenu de .qform, donc pas de fond/padding propres a elle (deja portes par .qform ci-dessus).
   .quote-thanks-date (demande Jerome 2026-09-28, "au-dessus de merci de votre demande, il faut la
   date de la demande") reprend le style des labels de champ (.field label plus haut) pour rester
   coherent avec le reste du formulaire plutot que d'inventer un nouveau style. */
.v26 .quote-thanks{text-align:center}
/* .v26 .qform + element (plutot que .v26 + element) : specificite necessaire pour passer devant
   .v26 .cta p (ligne ~469, texte blanc/17px pense pour le fond fonce de .cta) - .quote-thanks-date
   est un <p> mais affiche sur le fond BLANC de .qform, pas celui de .cta. */
.v26 .qform .quote-thanks-date{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;max-width:none}

/* ---------- footer ---------- */
/* 2026-08-13 (demande Jerome, "footer en pleine largeur") : style.css (feuille generique
   heritee, toujours chargee pour les pages non migrees) definit un ".footer" non scope avec
   largeur/marge/coin arrondis (pense a l'origine pour un tout autre composant "carte"), qui
   rendait le footer v26 inset avec des coins ronds au lieu d'occuper toute la largeur - override
   explicite ici (specificite ".v26 .footer" > ".footer" mais uniquement sur les proprietes
   effectivement redefinies, d'ou l'ajout de ces 3). */
.v26 .footer{background:var(--bg-alt);border-top:1px solid var(--line);padding-top:calc(58px*var(--density));border-radius:0;margin:0;width:auto}
.v26 .footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px}
.v26 .footer .brand img{height:42px;margin-bottom:14px}
.v26 .footer .desc{font-size:14.5px;color:var(--ink-2);max-width:24em;margin-bottom:16px}
.v26 .footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:14px;font-weight:800}
.v26 .footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v26 .footer ul a{font-size:14.5px;color:var(--ink-2);font-weight:600}
.v26 .footer ul a:hover{color:var(--green-deep)}
.v26 .foot-coord{display:flex;flex-direction:column;gap:9px;margin:0 0 18px}
.v26 .foot-coord li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);font-weight:600}
.v26 .foot-coord li svg{color:var(--green-deep);flex-shrink:0}
.v26 .foot-coord a{color:var(--ink-2)}
.v26 .foot-coord a:hover{color:var(--green-deep)}
.v26 .foot-social{display:flex;align-items:center;gap:8px;margin-top:10px}
.v26 .foot-social span{font-size:13px;font-weight:700;color:var(--ink-3);margin-right:4px}
.v26 .foot-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--ink-2);text-transform:lowercase}
.v26 .foot-social a:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-soft)}
.v26 .foot-agr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line)}
.v26 .foot-agr .lbl{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.v26 .footer .bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3);font-weight:600;flex-wrap:wrap;gap:10px}
.v26 .footer .bottom .legal{display:flex;gap:20px}
.v26 .footer .bottom .legal a:hover{color:var(--green-deep)}

/* ---------- bandeau cookies ---------- */
.v26 .cookiebar{position:sticky;bottom:0;z-index:40;background:var(--ink);color:#fff;font-size:13.5px}
.v26 .cookiebar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 32px;flex-wrap:wrap}
.v26 .cookiebar .cb-actions{display:flex;gap:10px;flex-shrink:0}
.v26 .cookiebar button{border-radius:var(--radius-pill);padding:8px 18px;font-size:13.5px;font-weight:700;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff}
.v26 .cookiebar button.acc{background:var(--green);border-color:var(--green)}

/* ---------- media (placeholder tant que les vraies photos ne sont pas integrees) ---------- */
.v26 .ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg, color-mix(in srgb,var(--green) 9%,#fff) 0 14px, color-mix(in srgb,var(--green) 4%,#fff) 14px 28px);display:flex;align-items:flex-end}
.v26 .card-media .ph,.v26 .portal-media .ph{position:absolute}
.v26 .ph .tag{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11.5px;color:var(--green-deep);background:rgba(255,255,255,.82);padding:5px 9px;border-radius:6px;margin:10px;font-weight:600;letter-spacing:.02em}
.v26 .ava .ph{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--green) 16%,#fff) 0 8px,color-mix(in srgb,var(--green) 7%,#fff) 8px 16px)}

/* =========================================================
   Page "Destinations" (home_country) — bannière + index des pays.
   Reprend la maquette vefe-home_country-offline.html a l'identique,
   scope .v26 comme le reste de refonte-2026.css. */
.v26 .dest-banner{background:linear-gradient(180deg,var(--green-tint),var(--bg));border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.v26 .dest-banner::before{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--green) 16%,transparent),transparent 70%);pointer-events:none}
.v26 .dest-banner .wrap{padding:26px 32px 34px;position:relative}
/* Breadcrumb : composant unique et partage par toutes les pages v26 (Destinations, fiche pays a
   venir, fiche produit...) - un seul aspect possible, cf. /destinations/ qui sert de reference.
   Anciennement scope a ".dest-banner .breadcrumb" (donc invisible/replie sur d'autres fonds,
   cf. la fiche produit qui affichait le fil d'Ariane par defaut du navigateur, sans le style). */
.v26 .breadcrumb{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-3);margin-bottom:20px;flex-wrap:wrap}
.v26 .breadcrumb a{color:var(--ink-2)}
.v26 .breadcrumb a:hover{color:var(--green-deep)}
.v26 .breadcrumb .sep{opacity:.5}
.v26 .dest-banner h1{font-size:clamp(32px,3.4vw,46px);margin-bottom:12px;max-width:16em;text-wrap:balance}
.v26 .dest-banner .lead{font-size:18px;color:var(--ink-2);max-width:44em}
.v26 .lead p{margin:0 0 .7em}
.v26 .lead p:last-child{margin-bottom:0}
/* "Lire la suite" (mobile uniquement) sur les textes d'intro .lead longs - partials/common/lead-readmore.php, app.js */
.v26 .lead-more{display:none}
@media (max-width:767.98px){
  .v26 .lead--collapsible{position:relative;max-height:7.2em;overflow:hidden}
  .v26 .lead--collapsible::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;background:linear-gradient(180deg,transparent,var(--bg))}
  .v26 .lead--collapsible.is-open{max-height:none}
  .v26 .lead--collapsible.is-open::after{display:none}
  .v26 .lead-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;border:0;background:none;color:var(--green-deep);font-weight:700;font-size:15px;cursor:pointer;text-decoration:underline}
}

.v26 .dest-index{padding:calc(44px*var(--density)) 0 calc(72px*var(--density))}
.v26 .index-bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.v26 .index-bar .rb-count{font-size:15px;color:var(--ink-2);font-weight:600}
.v26 .index-bar .rb-count b{color:var(--ink);font-weight:800}

.v26 .zones{display:inline-flex;gap:4px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px}
.v26 .zone{border:0;background:transparent;border-radius:var(--radius-pill);padding:9px 18px;font-weight:700;font-size:14px;color:var(--ink-2);transition:background .14s,color .14s}
.v26 .zone:hover{color:var(--green-deep)}
.v26 .zone.is-on{background:var(--green);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--green) 30%,transparent)}
/* Variante compacte des .zones/.zone : filtres discrets transport/hebergement des pages pays
   (country.php). Le composant .zones/.zone de base reste inchange (utilise ailleurs, ex. filtre
   zone geographique de home_country.php) - .zones--sm ne fait que reduire padding/police. */
.v26 .zones--sm{gap:3px;padding:3px}
.v26 .zones--sm .zone{padding:5px 12px;font-size:12.5px;font-weight:600}
/* Filtre "hebergement" en imitation select (country.php) : meme esprit visuel que .zones--sm
   (pilule, bg-alt, accent vert) mais en dropdown - plus adapte a 6 valeurs possibles que des
   pastilles cote a cote (cf. demande Jerome 2026-07-25). */
.v26 .fake-select{position:relative;display:inline-block}
.v26 .fake-select-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 12px 5px 14px;font-weight:600;font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:border-color .14s,color .14s}
.v26 .fake-select-btn:hover{color:var(--green-deep);border-color:var(--green)}
.v26 .fake-select-chevron{flex:0 0 auto;transition:transform .14s}
.v26 .fake-select.is-open .fake-select-btn{color:var(--green-deep);border-color:var(--green)}
.v26 .fake-select.is-open .fake-select-chevron{transform:rotate(180deg)}
.v26 .fake-select-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:100%;width:max-content;max-width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:6px;list-style:none;margin:0}
.v26 .fake-select.is-open .fake-select-panel{display:block}
/* Variante "acces rapide" (liste longue : tous les pays / tous les themes de la page, cf.
   home_country.php / home_product_sheet_tag.php, demande Jerome 2026-07-26) : la liste peut
   compter plusieurs dizaines d'entrees, contrairement aux filtres (2-5 options) - panneau
   scrollable plutot que d'etirer la page. */
.v26 .fake-select-panel--scroll{max-height:320px;overflow-y:auto}
/* L'"acces rapide" est toujours le 1er element (le plus a gauche) de l'index-bar, contrairement aux
   filtres (transport/hebergement/zone, toujours a droite) : le panneau doit donc s'aligner sur la
   GAUCHE du bouton, sinon il deborde a gauche du conteneur/de l'ecran (retour Jerome 2026-07-26,
   inverse du fix precedent sur les filtres - NE PAS toucher .fake-select-panel right:0 ci-dessus,
   qui reste correct pour les filtres). */
.v26 .fake-select-panel--left{left:0;right:auto}
.v26 .fake-select-panel li{padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.v26 .fake-select-panel li:hover{background:var(--bg-alt);color:var(--ink)}
.v26 .fake-select-panel li.is-on{background:var(--green-soft);color:var(--green-deep)}
@media(max-width:640px){.v26 .fake-select-panel{white-space:normal;max-width:none}}

/* Moteur de recherche du hero (Destination/Theme), rendu fonctionnel le 2026-08-06 (demande Jerome) :
   meme esprit que .fake-select mais panneau pleine largeur (aligne sur .selector, pas une pilule) et
   support d'un etat "is-empty" (grise, mais toujours cliquable - cf. JS home.php : cliquer une
   combinaison a 0 resultat reinitialise l'autre liste plutot que de bloquer le clic). */
.v26 .selector-wrap{position:relative}
.v26 .selector-wrap.is-open .selector{border-color:var(--green);box-shadow:0 4px 14px color-mix(in srgb,var(--green) 16%,transparent)}
.v26 .selector-wrap.is-open .s-val .chev{transform:rotate(180deg)}
.v26 .s-val .chev{transition:transform .14s}
.v26 .selector-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:6px;list-style:none;margin:0}
.v26 .selector-wrap.is-open .selector-panel{display:block}
.v26 .selector-panel li{padding:9px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.v26 .selector-panel li:hover{background:var(--bg-alt);color:var(--ink)}
.v26 .selector-panel li.is-on{background:var(--green-soft);color:var(--green-deep)}
.v26 .selector-panel li.is-empty{color:var(--ink-3);opacity:.55}
.v26 .selector-panel li.is-empty:hover{background:var(--bg-alt);color:var(--ink-3)}

.v26 .dest-zone-title{font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:var(--head-tracking);color:var(--ink);margin:44px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.v26 .dest-zone-title:first-of-type{margin-top:0}
.v26 .country-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.v26 .dest-zone-title+.country-grid{margin-top:20px}
.v26 .pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);transition:transform .18s,box-shadow .18s,border-color .18s}
.v26 .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.v26 .pcard-media{position:relative;aspect-ratio:3/2;overflow:hidden}
.v26 .pcard-media .ph{align-items:flex-start}
.v26 .pcard-media .ph .tag{font-size:11px}
.v26 .pcard-count{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:var(--radius-pill);padding:6px 13px;font-size:13px;font-weight:800;color:var(--green-deep);box-shadow:var(--shadow-sm);z-index:2}
.v26 .pcard-name{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:var(--head-tracking);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.v26 .pcard-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,26,12,0) 40%,rgba(20,26,12,.6) 100%)}
.v26 .pcard-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.v26 .pcard-body p{font-size:14.5px;color:var(--ink-2);line-height:1.5;flex:1;margin-bottom:16px}
.v26 .pcard-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--green-deep)}
.v26 .pcard-go .arr{transition:transform .15s}
.v26 .pcard:hover .pcard-go .arr{transform:translateX(4px)}
.v26 .index-empty{display:none;text-align:center;color:var(--ink-2);font-size:16px;padding:50px 0}

/* Cartes theme sans photo (2026-08-11, page /themes) : pastille icone + titre + resume court +
   lien "voir les X programmes", meme esprit visuel que .portal/.pillar (icone teintee, pas de
   media). Grille identique a .country-grid (3 colonnes) mais nouveau composant, .pcard reste
   inchange pour les pays (qui garderont des photos). */
.v26 .theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.v26 .theme-card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:26px;transition:transform .18s,box-shadow .18s,border-color .18s}
.v26 .theme-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.v26 .theme-ico{width:52px;height:52px;border-radius:14px;background:var(--green-soft);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.v26 .theme-card h3{font-size:19px}
.v26 .theme-card p{font-size:14.5px;color:var(--ink-2);line-height:1.55;flex:1;margin:0}
.v26 .theme-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--green-deep);margin-top:auto}
.v26 .theme-go .arr{transition:transform .15s}
.v26 .theme-card:hover .theme-go .arr{transform:translateX(4px)}

@media(max-width:980px){.v26 .country-grid,.v26 .theme-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.v26 .country-grid,.v26 .theme-grid{grid-template-columns:1fr}.v26 .index-bar{flex-direction:column;align-items:flex-start;gap:14px}}
/* Page Destinations (home_country.php) : seulement 2 elements dans l'index-bar depuis le masquage
   du filtre continent (Acces rapide + Theme, demande Jerome 2026-08-06) - contrairement aux pages
   pays/theme (rb-count texte + jusqu'a 3 filtres), les 2 tiennent sur une seule ligne en mobile,
   d'ou ce modificateur qui reste en row plutot que de repasser en column comme .index-bar de base. */
@media(max-width:640px){.v26 .index-bar--destinations{flex-direction:row;flex-wrap:wrap;align-items:center}}

/* =========================================================
   Responsive — absent de la maquette d'origine (prototype
   desktop uniquement) : ajouté pour un rendu correct sur
   mobile/tablette en attendant une passe mobile dédiée.
   ========================================================= */
@media (max-width: 960px){
  /* La barre utilitaire noire ne passe pas bien sur mobile -> masquee entierement.
     Le telephone est repris juste au-dessus de la ligne logo/CTA/burger via
     .mobile-phone-bar (logo + bouton devis complet + burger restent inchanges). */
  .v26 .utility{display:none}
  .v26 .mobile-phone-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;background:var(--green-tint);border-bottom:1px solid var(--line);font-size:14px;font-weight:700;color:var(--green-deep)}
  .v26 .nav{display:none}
  .v26 .nav-cta .nav-phone{display:none}
  .v26 .burger{display:flex}
  .v26 .hero .wrap{grid-template-columns:1fr;gap:28px}
  .v26 .hero-media{min-height:260px}
  .v26 .search-grid{grid-template-columns:1fr}
  .v26 .trust-stats{grid-template-columns:repeat(2,1fr)}
  .v26 .portals,.v26 .cards,.v26 .quotes,.v26 .why{grid-template-columns:repeat(2,1fr)}
  .v26 .cta .inner{grid-template-columns:1fr}
  .v26 .footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .v26 .wrap{padding:0 20px}
  .v26 .cards,.v26 .quotes,.v26 .why,.v26 .portals{grid-template-columns:1fr}
  .v26 .footer .top{grid-template-columns:1fr}
  .v26 .burger{width:36px;height:36px}
  /* petit ajustement d'espacement (pas la taille du bouton devis lui-meme) pour finir
     de caler logo + CTA + burger sur les tres petites largeurs. */
  .v26 .nav-cta{gap:8px}
}

/* ============================================================
   PAGE FICHE PRODUIT (sheet.php) — design vefe-product.html.
   Repris quasi tel quel de la maquette, scope .v26 comme le reste du fichier. Deux renommages
   par rapport a la maquette pour eviter une collision avec des classes .v26 deja utilisees par
   la home (meme nom, role different) : .why -> .why-card (la home l'utilise deja comme grille
   4 colonnes pour "Pourquoi VEFE"), .sec-head -> .prod-sec-head (la home l'utilise deja pour ses
   propres titres de section, avec des regles differentes). Le "jump nav" et la sidebar sticky
   utilisent des valeurs de decalage fixes (64px/84px) plutot qu'un selecteur ~ conditionne par
   .header.compact : le header reste desormais en permanence compact (cf. plus haut), la variante
   "grand format" n'existe plus. */
.v26 .prod-top{background:linear-gradient(180deg,var(--green-tint),var(--bg));border-bottom:1px solid var(--line)}
.v26 .prod-top .wrap{padding:22px 32px 0}
.v26 .prod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:20px 0 34px}
.v26 .prod-head .ph-txt{max-width:44em;flex:1;min-width:420px}
.v26 .prod-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.v26 .pbadge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:6px 13px;font-size:12.5px;font-weight:800;letter-spacing:.01em}
.v26 .pbadge--pays{background:var(--green);color:#fff}
.v26 .pbadge--eco{background:var(--bg);color:var(--green-deep);border:1.5px solid var(--green)}
.v26 .prod-head h1{font-size:clamp(30px,3.3vw,44px);line-height:1.06;margin-bottom:12px;text-wrap:balance}
.v26 .prod-head .lead{font-size:17px;color:var(--ink-2);line-height:1.55}
.v26 .prod-head .ph-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.v26 .prod-head .ph-meta .m{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink)}
.v26 .prod-head .ph-meta svg{color:var(--green-deep);flex-shrink:0}
.v26 .prod-head .ph-meta .m small{display:block;font-size:12px;font-weight:600;color:var(--ink-3);margin-top:1px}
.v26 .prod-thumb{position:relative;width:300px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;margin:0}
.v26 .prod-thumb .ph .tag{font-size:11px}

.v26 .prod-layout{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start;padding:48px 0 72px}
.v26 .prod-main{min-width:0}
.v26 .prod-section{margin-bottom:52px;scroll-margin-top:110px}
.v26 .prod-section:last-child{margin-bottom:0}
.v26 .prod-sec-head{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.v26 .prod-sec-head .s-ico{width:40px;height:40px;border-radius:12px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;flex-shrink:0}
.v26 .prod-sec-head h2{font-size:clamp(23px,2.4vw,30px);line-height:1.1;margin:0}
.v26 .prod-main p.rich,.v26 .prod-main .rich{font-size:16px;color:var(--ink-2);line-height:1.65;margin-bottom:16px}
.v26 .itin-block{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 24px}
.v26 .itin-block p{margin-bottom:12px}
.v26 .itin-block p:last-child{margin-bottom:0}

/* 2026-08-12 : typographie des blocs riches injectes depuis aProgram_example / aWhy_choose_this
   (HTML WorkTool avec h2/h3/ul), non stylee jusqu'ici (le bloc description n'utilisait que des
   <p>). Reprend le vocabulaire visuel de .page-blocks (page.php) - barre verte + puce ▸. */
.v26 .prod-main .rich h2{color:var(--ink);font-size:1.3rem;line-height:1.3;margin:22px 0 12px;font-weight:800}
.v26 .prod-main .rich h2:first-child{margin-top:0}
.v26 .prod-main .rich h3{color:var(--green-deep);font-size:1.05rem;line-height:1.35;margin:20px 0 8px;font-weight:700;padding-left:14px;position:relative}
.v26 .prod-main .rich h3::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:2px;background:var(--green)}
.v26 .prod-main .rich h3:first-child{margin-top:0}
.v26 .prod-main .rich ul{list-style:none;padding-left:0;margin:0 0 14px}
.v26 .prod-main .rich li{list-style:none;position:relative;padding-left:24px;margin-bottom:8px;display:block}
.v26 .prod-main .rich li::before{content:"\25B8";position:absolute;left:2px;top:0;color:var(--green-deep);font-size:13px;line-height:1.75}
.v26 .prod-main .rich a{color:var(--green-deep);font-weight:600}
.v26 .prod-main .rich a:hover{text-decoration:underline}
.v26 .prog-intro{margin-bottom:18px}
.v26 .why-rich{margin-top:4px}

.v26 .prod-jump{position:sticky;top:76px;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-bottom:0}
.v26 .prod-jump .wrap{display:flex;gap:6px;padding:0 32px;overflow-x:auto}
.v26 .prod-jump a{padding:15px 4px;margin-right:22px;font-size:14.5px;font-weight:700;color:var(--ink-2);border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .14s,border-color .14s}
.v26 .prod-jump a:hover{color:var(--green-deep)}
.v26 .prod-jump a.is-active{color:var(--green-deep);border-color:var(--green)}

.v26 .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 22px}
.v26 .why-card{display:flex;gap:13px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px}
.v26 .why-card .w-ico{width:34px;height:34px;border-radius:9px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;flex-shrink:0}
.v26 .why-card span{font-size:14.5px;color:var(--ink);line-height:1.5;font-weight:600}
.v26 .callout{display:flex;align-items:center;gap:16px;background:var(--green-tint);border:1px solid var(--green-soft);border-left:4px solid var(--green);border-radius:var(--radius-sm);padding:18px 22px;flex-wrap:wrap}
.v26 .callout p{font-size:15.5px;color:var(--ink);font-weight:600;margin:0;flex:1;min-width:200px}
.v26 .callout .btn{flex-shrink:0}

.v26 .opts{display:flex;flex-direction:column;gap:10px}
.v26 .opt{display:flex;align-items:flex-start;gap:13px;padding:15px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)}
.v26 .opt .o-ico{color:var(--green-deep);flex-shrink:0;margin-top:1px}
.v26 .opt p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}

/* ---------- visites "a la carte" (fiche produit, 2026-08-29) ---------- */
.v26 .alacarte-counter{font-weight:700;font-size:15px;color:var(--ink);margin:0 0 20px}
.v26 .alacarte-counter #alacarte-count{color:var(--green-deep)}
.v26 .alacarte-groups{display:flex;flex-direction:column;gap:26px;margin-bottom:20px}
.v26 .alacarte-group h3{font-size:16.5px;margin:0 0 12px;color:var(--ink)}
.v26 .alacarte-visits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v26 .alacarte-visit{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s}
.v26 .alacarte-visit:hover{border-color:var(--green)}
.v26 .alacarte-visit.is-checked{border-color:var(--green);background:var(--green-tint)}
.v26 .alacarte-visit input{position:absolute;opacity:0;width:0;height:0}
.v26 .alacarte-visit .av-box{flex-shrink:0;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid var(--line);background:var(--bg);display:grid;place-items:center;transition:background .15s,border-color .15s}
.v26 .alacarte-visit .av-box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0}
.v26 .alacarte-visit input:checked~.av-box{background:var(--green);border-color:var(--green)}
.v26 .alacarte-visit input:checked~.av-box::after{opacity:1}
.v26 .alacarte-visit .av-body b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.v26 .alacarte-visit .av-body p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.v26 .alacarte-warning{margin-bottom:20px;padding:13px 18px;border-radius:var(--radius-sm);background:#FBEAEA;color:var(--cta-deep);font-size:14px;font-weight:700}
@media(max-width:640px){.v26 .alacarte-visits{grid-template-columns:1fr}}

.v26 .eco{background:var(--green-tint);border:1px solid var(--green-soft);border-radius:var(--radius);padding:26px 28px}
.v26 .eco-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.v26 .eco-head .leaf{width:42px;height:42px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0}
.v26 .eco-head b{font-size:18px;font-weight:800}
.v26 .eco-head small{display:block;font-size:13px;font-weight:600;color:var(--ink-3);margin-top:1px}
.v26 .eco-list{display:flex;flex-wrap:wrap;gap:10px}
.v26 .eco-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border-radius:var(--radius-pill);padding:9px 16px;font-size:14px;font-weight:700;color:var(--ink)}
.v26 .eco-chip svg{color:var(--green-deep)}
.v26 .eco .rich{margin-bottom:0}
.v26 .eco > p{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0}

.v26 .tarif{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.v26 .tarif-head{background:var(--ink);color:#fff;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.v26 .tarif-head b{font-size:16px;font-weight:800}
.v26 .tarif-head span{font-size:13.5px;color:rgba(255,255,255,.7)}
.v26 .tarif .rich{padding:16px 22px 0;margin-bottom:0;font-size:14.5px}
.v26 .tarif .rich b{display:block;margin-bottom:6px;color:var(--ink)}
.v26 .tarif-note{padding:14px 22px;font-size:12.5px;color:var(--ink-3);line-height:1.5;background:var(--bg-alt)}
.v26 .tarif .btn--devis{margin:18px 22px 22px}

.v26 .prod-aside{position:sticky;top:140px;z-index:10;display:flex;flex-direction:column;gap:16px}
.v26 .book{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.v26 .book-top{padding:22px 24px;border-bottom:1px solid var(--line-2)}
.v26 .book-price{display:flex;align-items:baseline;gap:8px}
.v26 .book-price .from{font-size:14px;color:var(--ink-3);font-weight:600}
.v26 .book-price .amt{font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--ink);line-height:1}
.v26 .book-price .per{font-size:14px;color:var(--ink-3);font-weight:600}
.v26 .book-academy{margin-top:14px}
.v26 .book-academy label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.v26 .book-academy select{width:100%;appearance:none;background:var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23557D12' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 34px 11px 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.v26 .book-academy select:focus{outline:2px solid var(--green);outline-offset:1px}
.v26 .book-top .incl{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:10px}
.v26 .book-facts{padding:8px 24px}
.v26 .bfact{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.v26 .bfact:last-child{border-bottom:0}
.v26 .bfact .bf-ico{width:34px;height:34px;border-radius:9px;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;flex-shrink:0}
.v26 .bfact b{font-size:14.5px;font-weight:700;display:block}
.v26 .bfact b a{color:var(--ink);text-underline-offset:2px}
.v26 .bfact b a:hover{color:var(--green-deep)}
.v26 .bfact small{font-size:12.5px;color:var(--ink-3);font-weight:600}
.v26 .book-actions{padding:20px 24px 24px;display:flex;flex-direction:column;gap:10px}
.v26 .book-actions .btn{width:100%;justify-content:center}
.v26 .book-dl{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink-2);padding:11px}
.v26 .book-dl:hover{color:var(--green-deep)}
.v26 .aside-help{display:flex;align-items:center;gap:14px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.v26 .aside-help .h-av{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.v26 .aside-help b{font-size:14.5px;display:block}
.v26 .aside-help p{font-size:13px;color:var(--ink-2);margin:2px 0 0;line-height:1.4}
.v26 .aside-help a{font-weight:700;color:var(--green-deep);white-space:nowrap}

.v26 .related{background:var(--bg-band);border-top:1px solid var(--line)}
.v26 .related .wrap{padding:56px 32px}
.v26 .related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.v26 .related-head .eyebrow{margin-bottom:6px}
.v26 .related-head h2{font-size:clamp(24px,2.5vw,32px);margin:0}
.v26 .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.v26 .rel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);transition:transform .18s,box-shadow .18s,border-color .18s}
.v26 .rel:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.v26 .rel-media{aspect-ratio:16/10;position:relative}
.v26 .rel-media .ph .tag{font-size:11px}
.v26 .rel-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.v26 .rel-body h3{font-size:18px;line-height:1.2;margin-bottom:9px}
.v26 .rel-body p{font-size:14px;color:var(--ink-2);line-height:1.5;flex:1;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v26 .rel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v26 .rel-meta{font-size:13px;font-weight:700;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
.v26 .rel-meta svg{color:var(--green-deep)}
.v26 .rel-go{font-size:14px;font-weight:700;color:var(--green-deep);display:inline-flex;align-items:center;gap:6px}

@media (max-width: 980px){
  .v26 .prod-layout{grid-template-columns:1fr;gap:32px}
  .v26 .prod-aside{position:static;flex-direction:row;flex-wrap:wrap}
  .v26 .book{flex:2;min-width:280px}
  .v26 .aside-help{flex:1;min-width:240px}
  .v26 .prod-thumb{width:100%;aspect-ratio:16/9}
  .v26 .why-grid{grid-template-columns:1fr}
  .v26 .rel-grid{grid-template-columns:1fr}
}
@media (max-width: 960px){
  .v26 .prod-top .wrap{padding:16px 20px 0}
  .v26 .prod-head{padding:16px 0 24px;gap:24px}
  .v26 .prod-head .ph-txt{min-width:0}
  .v26 .prod-thumb{width:100%}
  .v26 .prod-jump .wrap{padding:0 20px}
  .v26 .prod-wrap{padding:0 20px}
  .v26 .related .wrap{padding:40px 20px}
}
@media (max-width: 600px){
  .v26 .prod-head h1{font-size:28px}
  .v26 .prod-head .ph-meta{gap:14px}
  .v26 .book-actions .btn{padding-left:10px;padding-right:10px}
}

/* Fix collision .ph (2026-08-10) : le wrapper .v26 englobe TOUTES les pages (pas seulement celles
   refaites dans ce fichier), donc la regle ".v26 .ph{position:absolute;inset:0}" (ligne ~354,
   pensee pour les cards refaites) s'appliquait aussi aux cartes du blog (.mcard.bcard .ph, classes
   generiques venues d'app.css/nacelesl.co.uk, jamais migrees vers .v26) et les faisait gonfler en
   plein cadre (position:absolute sans parent position:relative). Meme specificite que la regle
   d'app.css (2 classes) mais chargee apres -> gagnait par ordre de cascade. On neutralise ici
   uniquement pour .mcard (blog/category/page/faq), specificite superieure (3 classes), sans toucher
   aux cards deja migrees (.card-media .ph, .portal-media .ph, etc. restent en position:absolute). */
.v26 .mcard .ph{position:relative;inset:auto}

/* ============================================================
   PAGE EDITORIALE (page.php) — bandeau, grille contenu+sommaire lateral,
   typographie des blocs edites, FAQ, familles de cours, page devis
   instantane, bandeau de fin. Migre depuis app.css (2026-08-11, retrait
   definitif d'app.css du layout suite aux collisions .mega/.nav a/
   h2.title, demande Jerome) : couleurs bleues NESL -> vert VEFE, rayons/
   ombres/couleurs alignes sur les tokens .v26 (var(--radius),
   var(--shadow), var(--ink-2/3)...) plutot que les valeurs propres a
   app.css (var(--blue*), var(--muted*), px en dur). Le bandeau utilise
   desormais .dest-banner/.breadcrumb (memes classes que /destinations,
   /themes, /blog) plutot que .page-head/.crumb-line — cf. blog.php pour
   le meme principe applique a la liste des articles. */
.v26 .container-x{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.v26 .sec{max-width:var(--maxw);margin:0 auto;padding:60px 32px}
.v26 .editorial-page > .dest-banner + .container-x.edito-grid,
.v26 .editorial-page > .page-blocks:first-of-type{padding-top:34px}
.v26 .link-arrow{color:var(--green-deep);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.v26 .link-arrow:hover{color:var(--green)}

/* grille contenu + sommaire lateral */
.v26 .edito-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;padding-top:38px;padding-bottom:8px}
.v26 .edito-main{min-width:0}
.v26 .edito-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.v26 .page-blocks{padding:0}
.v26 .pb-inner{max-width:100%}
.v26 .page-blocks__inner{max-width:840px;margin:0 auto}
.v26 .edito-main .page-blocks + .page-blocks{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}

/* typographie du contenu edite (website_page_block_display) - source unique
   desormais pour page.php/blog.php/pages pays, ne depend plus d'app.css */
.v26 .website_page_editor .page-blocks h2,
.v26 .website_page_editor .page-blocks h2.title{position:relative;color:var(--ink);font-size:1.55rem;line-height:1.3;margin:0 0 14px;font-weight:800;letter-spacing:-.01em;padding-left:16px}
.v26 .website_page_editor .page-blocks h2::before,
.v26 .website_page_editor .page-blocks h2.title::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:3px;background:var(--green)}
.v26 .website_page_editor .page-blocks h3{color:var(--ink);font-size:1.2rem;margin:26px 0 10px;font-weight:700}
.v26 .website_page_editor .page-blocks p,
.v26 .website_page_editor .page-blocks li{font-size:1.04rem;line-height:1.8;color:var(--ink-2)}
.v26 .website_page_editor .page-blocks p{margin:0 0 1em}
.v26 .website_page_editor .page-blocks p:last-child{margin-bottom:0}
.v26 .website_page_editor .page-blocks [id^="webpage_block_"] + [id^="webpage_block_"]{margin-top:34px;padding-top:34px;border-top:1px solid var(--line)}
.v26 .website_page_editor .page-blocks ul{list-style:none;padding-left:0;margin:0 0 1em}
.v26 .website_page_editor .page-blocks ul li{position:relative;padding-left:26px;margin-bottom:9px}
.v26 .website_page_editor .page-blocks ul li::before{content:"\25B8";position:absolute;left:3px;top:0;color:var(--green-deep);font-size:14px;line-height:1.9}
.v26 .website_page_editor .page-blocks ol{padding-left:1.2rem;margin:0 0 1em}
.v26 .website_page_editor .page-blocks ol li{margin-bottom:9px;padding-left:4px}
.v26 .website_page_editor .page-blocks ol li::marker{color:var(--green-deep);font-weight:700}
.v26 .website_page_editor .page-blocks a{color:var(--green-deep);font-weight:600}
.v26 .website_page_editor .page-blocks a:hover{text-decoration:underline}
.v26 .website_page_editor .page-blocks img{border-radius:16px;max-width:100%;height:auto;box-shadow:var(--shadow-lg);margin-bottom:20px}
.v26 .website_page_editor .page-blocks hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.v26 .website_page_editor .page-blocks .website_page_editor_summary{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 18px}
.v26 .edito-faq-h{font-size:1.55rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:6px 0 18px}

/* sommaire lateral (#edito-toc, rempli par app.js selon les h2/h3 du contenu) */
.v26 .toc-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;box-shadow:var(--shadow-sm)}
.v26 .toc-card__h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.v26 .toc{display:flex;flex-direction:column;gap:2px}
.v26 .toc a{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2);text-decoration:none;padding:6px 10px;border-left:2px solid var(--line);border-radius:0 7px 7px 0}
.v26 .toc a:hover{color:var(--green-deep);background:var(--green-soft)}
.v26 .toc a.lvl3{padding-left:22px;font-size:13px}
.v26 .toc a.active{color:var(--green-deep);border-left-color:var(--green);background:var(--green-soft);font-weight:600}

/* carte contact laterale (2026-08-11 : fond var(--ink) quasi-noir remplace par un vert
   fonce degrade, retour Jerome "on ne devrait pas avoir de bleu ou fond noir" - meme esprit
   que .edito-cta__box, coherent avec l'identite VEFE plutot que le fond noir/bleu herite
   du template NESL) */
.v26 .side-cta{background:linear-gradient(135deg,var(--green-deep),#3f5e0d);color:#fff;border-radius:var(--radius-sm);padding:20px;display:flex;flex-direction:column;gap:10px}
.v26 .side-cta__h{font-weight:800;font-size:17px}
.v26 .side-cta p{font-size:13.5px;color:rgba(255,255,255,.75);margin:0 0 4px;line-height:1.5}

/* bandeau de fin (contact/devis, sur toutes les pages editoriales) */
.v26 .edito-cta{padding:22px 0 66px}
.v26 .edito-cta__box{background:linear-gradient(120deg,var(--green) 0%,var(--green-deep) 100%);border-radius:var(--radius);padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;box-shadow:0 22px 44px color-mix(in srgb,var(--green) 30%,transparent)}
.v26 .edito-cta__box h2{color:#fff;font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.v26 .edito-cta__box p{color:rgba(255,255,255,.85);margin:0;font-size:15px;max-width:560px}
.v26 .edito-cta__acts{display:flex;gap:12px;flex-wrap:wrap}

/* FAQ (page.php) */
.v26 .faq-list{display:flex;flex-direction:column;gap:12px}
.v26 .faq-item{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 24px;cursor:pointer}
.v26 .faq-item.is-open{border-color:var(--green)}
.v26 .faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px}
.v26 .faq-q span{font-weight:700;font-size:16.5px;color:var(--ink)}
.v26 .faq-sign{color:var(--ink-3);font-size:22px;line-height:1}
.v26 .faq-item.is-open .faq-sign{color:var(--green-deep)}
.v26 .faq-a{font-size:15px;line-height:1.6;color:var(--ink-2);margin:13px 0 0;display:none}
.v26 .faq-item.is-open .faq-a{display:block}

/* familles de cours (page.php, courses landing id=1) */
.v26 .row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:38px}
.v26 .row-head h2{font-size:36px;font-weight:800;color:var(--ink);margin:0;max-width:560px}
.v26 .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.v26 .fcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:28px 24px;display:flex;flex-direction:column;min-height:260px;transition:.2s;text-decoration:none}
.v26 .fcard:hover{border-color:var(--green);box-shadow:var(--shadow)}
.v26 .fcard .badge{width:46px;height:46px;border-radius:11px;background:var(--green-soft);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:18px}
.v26 .fcard h3{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 9px}
.v26 .fcard p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 18px;flex:1}

/* page devis instantane (page.php, id=130) */
.v26 .quote-page-sec{padding-top:8px;padding-bottom:72px}
.v26 .quote-page-card{max-width:760px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 36px}
.v26 .quote-page-head{text-align:center;margin-bottom:24px}
.v26 .quote-page-head h2{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0 0 6px}
.v26 .quote-page-head p{color:var(--ink-2);margin:0;font-size:15px}

/* Bandeau "Demandez un devis" (#devis / .cta-devis, toutes pages, cf.
   partials/sections/quote-cta.php) : visible en flux normal en bas de chaque page (comme sur
   l'accueil avant refonte). Le bouton "Demander un devis" (launch_quote() dans layout.php)
   ajoute la classe quote_form_go_to_center sur <body> - meme principe que le bouton
   "Inquire & Contact" de nacel.org sur sa section.contact-form - ce qui fait passer CETTE
   MEME section en position:fixed, centree a l'ecran par-dessus un fond sombre, plutot que
   d'ouvrir une popin separee. Demande Jerome 2026-08-13. */
.v26 .cta-devis-close{display:none}
.v26.quote_form_go_to_center{overflow:hidden}
.v26.quote_form_go_to_center .cta-devis{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;background:rgba(27,33,19,.6);backdrop-filter:blur(2px);
  margin:0; /* annule le margin 60px 0 de .section : sinon l'overlay fixed demarre 60px sous le haut de l'ecran et laisse le header visible (2026-10-15) */
}
.v26.quote_form_go_to_center .cta-devis .wrap{margin:auto;max-width:920px;padding:0;width:100%}
.v26.quote_form_go_to_center .cta-devis .cta{max-height:calc(100vh - 48px);overflow-y:auto}
.v26.quote_form_go_to_center .cta-devis-close{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);font-size:20px;line-height:1;color:#fff;cursor:pointer;transition:background .15s;z-index:1}
.v26.quote_form_go_to_center .cta-devis-close:hover{background:rgba(255,255,255,.18)}
@media (max-width:600px){
  .v26.quote_form_go_to_center .cta-devis{padding:0}
  .v26.quote_form_go_to_center .cta-devis .wrap{max-width:100%}
  .v26.quote_form_go_to_center .cta-devis .cta{max-height:100vh;border-radius:0}
}

@media (max-width:991px){
  .v26 .edito-grid{grid-template-columns:1fr;gap:0}
  .v26 .edito-side{position:static;margin-top:34px}
  .v26 .toc-card{display:none}
  .v26 .row-head h2{font-size:26px}
  .v26 .grid-4{grid-template-columns:1fr 1fr}
}
@media (max-width:767.98px){
  .v26 .edito-cta__box{padding:26px 24px}
  .v26 .edito-cta__box h2{font-size:22px}
}
@media (max-width:600px){
  .v26 .sec{padding:40px 24px}
  .v26 .grid-4{grid-template-columns:1fr}
  .v26 .quote-page-card{padding:24px 20px}
}

/* ---------- vignette brochure Developpement Durable (2026-10-12, demande client) ----------
   Utilisee sur l'accueil (partials/sections/brochure-dd.php) et dans le bloc "Brochure" de la
   page catalogue (meme balisage .brochure-dd, ecrit dans le bloc WYSIWYG). */
.v26 .brochure-dd{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:34px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 10px 30px rgba(27,33,19,.06)}
.v26 .brochure-dd__cover{display:block;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 14px 30px rgba(27,33,19,.18);transition:transform .2s ease}
.v26 .brochure-dd__cover:hover{transform:translateY(-3px)}
.v26 .brochure-dd__cover img{display:block;width:100%;height:auto}
.v26 .brochure-dd__body h2,.v26 .brochure-dd__body h3{margin:0 0 10px;font-size:26px;letter-spacing:-.02em}
.v26 .brochure-dd__body p{margin:0 0 20px;color:var(--ink-2)}
.v26 .brochure-dd__acts{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:767.98px){
  .v26 .brochure-dd{grid-template-columns:1fr;padding:20px;gap:22px}
  .v26 .brochure-dd__cover{max-width:240px}
}

/* Select2 sur la destination du devis (2026-10-13), meme habillage que select.inp */
.v26 .qform .select2-container{width:100% !important;display:block}
.v26 .qform .select2-container--default .select2-selection--single{height:auto;min-height:0;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);padding:12px 38px 12px 14px;display:flex;align-items:center;outline:0}
.v26 .qform .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.3;font-size:15px;font-weight:600;color:var(--ink)}
.v26 .qform .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--ink)}
.v26 .qform .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;top:0;right:10px}
.v26 .qform .select2-container--default.select2-container--focus .select2-selection--single,
.v26 .qform .select2-container--default.select2-container--open .select2-selection--single{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.v26 .qform .select2-dropdown{border:1.5px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);z-index:1060}
.v26 .qform .select2-search--dropdown{padding:8px}
.v26 .qform .select2-search--dropdown .select2-search__field{border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;font-size:15px;outline:0}
.v26 .qform .select2-search--dropdown .select2-search__field:focus{border-color:var(--green)}
.v26 .qform .select2-container--default .select2-results__option{padding:9px 14px;font-size:15px;font-weight:600;color:var(--ink)}
.v26 .qform .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:var(--green-soft);color:var(--ink)}
.v26 .qform .select2-container--default .select2-results__option--selected{background:var(--green);color:#fff}