/* ========================================================================= MediTravel Solutions — Front v2 (papier & laiton) Fondations : design tokens, typographie, composants de base, nav, footer. Fidèle aux maquettes DesignCombo, ré-écrit en CSS standard (hover réels, pas d'attributs style-hover custom), + RTL arabe + responsive. ========================================================================= */ :root { /* ── DA globale « BLEU CLINIQUE » : re-skin couleur de tout le site (nav, footer, pages intérieures). Les tokens historiques (--brass, --chalk…) sont conservés comme ALIAS et repointés vers la palette bleue, pour que les pages intérieures (structure arche/niche) héritent du bleu sans réécriture. La refonte STRUCTURELLE des pages viendra plus tard. La home a son propre scope .homev2-blue (cartes/carrousel). ── */ /* ── DA reprise de l'ancien front « front-medi » : navy profond + turquoise + terracotta chaude, sur fond os/sable. Les tokens historiques v2 (--brass, --azur, --blue, --chalk…) sont conservés comme ALIAS et repointés vers cette palette, pour reskinner tout le site (nav, footer, pages, textes) sans réécriture. ── */ --nvy:#0E3B52; --nvy-deep:#07273A; --blue:#1B7575; --azur:#D8704A; --sky:#E8B14A; --ink:#14222B; --ink-soft:#4A5862; --paper:#FBF9F4; --paper-2:#FAF6EE; --paper-3:#F4ECDD; /* --brass = accent → terracotta (ex-laiton/azur) ; conservé comme alias. */ --brass:#D8704A; --brass-soft:#E8B14A; --teal:#1B7575; --teal-deep:#1B7575; --body:#4A5862; --muted:#8896A0; --line:rgba(7,39,58,.14); --line-2:rgba(7,39,58,.08); /* Duotone neutralisé : images en couleurs naturelles (aucun N&B ni calque sombre). */ --duo-gray:0; --duo-ink:0; --duo-brass:0; --shell:1280px; /* Polices reprises de l'ancien front : Instrument Serif (display) + Manrope (corps). */ --disp-font:'Instrument Serif','Cormorant Garamond',Georgia,serif; --body-font:'Manrope',ui-sans-serif,system-ui,sans-serif; --ar-font:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif; --ar-disp-font:'Reem Kufi','Cairo','Amiri',serif; /* Tokens « Deux Rives » (pages arche) — repointés sur la nouvelle DA. */ --chalk:#FBF9F4; --chalk-2:#FAF6EE; --chalk-3:#F4ECDD; --ink-2:#4A5862; --cobalt:#1B7575; --azure:#D8704A; --azure-soft:#E8B14A; --duo-blue:0; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:var(--body-font); color:var(--body); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.6; /* Empêche le scroll horizontal dû aux éléments décoratifs (cadres/orbites en offset négatif) — surtout en RTL où le repère s'inverse. `clip` neutralise le débordement horizontal sans créer de conteneur de scroll (préserve position:sticky, contrairement à overflow:hidden). */ overflow-x:clip; } html { overflow-x:clip; } /* Lien d'évitement accessible — masqué sans déborder (pas de left:-9999px, qui casse le clip horizontal en RTL). Révélé au focus clavier. */ .skip-link { position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; z-index:100; } .skip-link:focus { width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; inset-inline-start:12px; top:12px; background:var(--ink); color:var(--paper); padding:10px 16px; } /* Honeypot anti-spam — masqué sans déborder (idem, RTL-safe). */ .hp-field { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } ::selection { background:rgba(46,134,230,.22); } a { color:inherit; } input, textarea, select, button { font-family:inherit; } ::placeholder { color:#A69F90; } img { max-width:100%; } /* ---- Typographie ---- */ .disp { font-family:var(--disp-font); font-weight:400; } .eyebrow { font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; } /* ---- Conteneur ---- */ .shell { max-width:var(--shell); margin:0 auto; padding:0 44px; } /* ---- Image duotone (effet signature) ---- */ .duo { position:relative; overflow:hidden; background:var(--paper-3); } .duo img, .duo image-slot { filter:grayscale(var(--duo-gray)) contrast(1.05) brightness(1.02); display:block; width:100%; height:100%; object-fit:cover; } .duo::after { content:""; position:absolute; inset:0; background:var(--ink); mix-blend-mode:multiply; opacity:var(--duo-ink); pointer-events:none; } .duo::before { content:""; position:absolute; inset:0; z-index:2; background:var(--brass); mix-blend-mode:soft-light; opacity:var(--duo-brass); pointer-events:none; } /* ---- Animations ---- */ @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } @keyframes spin-slow { to { transform:rotate(360deg); } } /* ---- Ligne d'intervention (hover) ---- */ .ix-row:hover .ix-name { color:var(--paper)!important; } .ix-row:hover { background:var(--ink)!important; } .ix-row:hover .ix-num { color:var(--brass-soft)!important; } .ix-row:hover .ix-desc { color:var(--paper-2)!important; } .ix-row:hover .ix-arrow { color:var(--brass-soft)!important; transform:translateX(6px); } /* ---- Boutons ---- */ .btn { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:12px 20px; border:none; cursor:pointer; transition:.2s; } .btn-ink { background:var(--ink); color:var(--paper); } .btn-ink:hover { background:var(--brass); color:var(--ink); } .btn-brass { background:var(--brass); color:var(--ink); } .btn-brass:hover { background:var(--brass-soft); } .btn-ghost { background:none; color:var(--ink); border:1.5px solid var(--line); } .btn-ghost:hover { border-color:var(--brass); color:var(--brass); } /* ---- Carte avec effet de lévitation ---- */ .card-lift { transition:transform .25s ease, box-shadow .25s ease; } .card-lift:hover { transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(14,46,52,.35); } /* ---- Filtres catégorie (interventions) ---- */ .ix-filter { padding:8px 16px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); border:1px solid var(--line); transition:.2s; white-space:nowrap; } .ix-filter:hover { border-color:var(--brass); color:var(--brass); } .ix-filter.on { background:var(--ink); color:var(--paper); border-color:var(--ink); } /* ========================================================================= Header / Navigation ========================================================================= */ .site-topbar { background:var(--nvy-deep); color:rgba(242,236,224,.82); font-size:12.5px; letter-spacing:.02em; } .site-topbar a { color:rgba(242,236,224,.82); text-decoration:none; } .site-topbar a:hover { color:var(--brass-soft); } .site-header { position:sticky; top:0; z-index:60; background:rgba(242,236,224,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s; } .site-header.scrolled { box-shadow:0 10px 30px -18px rgba(14,46,52,.4); } /* Logo (SVG + texte bicolore, repris de l'ancien front) */ .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; } .nav-logo-text { font-family:var(--disp-font); font-size:22px; line-height:1; color:var(--nvy-deep); } .nav-logo-text small { display:block; font-family:var(--body-font); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); margin-top:4px; } html[dir="rtl"] .nav-logo-text { font-family:var(--ar-disp-font); } html[dir="rtl"] .nav-logo-text small { letter-spacing:0; } /* Menus déroulants */ .ddtop { text-decoration:none; color:var(--ink); padding:6px 0 3px; display:inline-flex; align-items:center; gap:6px; border-bottom:1.5px solid transparent; transition:.2s; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; cursor:pointer; background:none; font-family:inherit; } .ddtop:hover, .ddtop[aria-current="page"] { border-color:var(--brass); } .ddgroup { position:relative; } .ddgroup > .ddmenu { position:absolute; top:100%; left:0; transform:translateY(6px); min-width:236px; background:var(--paper); border:1px solid var(--line); box-shadow:0 22px 46px -16px rgba(14,46,52,.32); padding:14px 0 10px; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s,visibility .2s; z-index:70; } .ddgroup:hover > .ddmenu, .ddgroup:focus-within > .ddmenu { opacity:1; visibility:visible; transform:translateY(0); } .ddmenu a { display:block; padding:9px 22px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; white-space:nowrap; transition:.15s; } .ddmenu a:hover { background:var(--paper-2); color:var(--brass); } /* Sélecteur de langue */ .lang-switch { display:inline-flex; gap:4px; align-items:center; } .lang-switch a { padding:4px 9px; border-radius:2px; font-size:12px; font-weight:700; letter-spacing:.08em; text-decoration:none; color:var(--ink-soft); } .lang-switch a.on { background:var(--brass); color:var(--paper); } /* Sélecteur de langue « pilule + menu » (repris de l'ancien front) */ .nav-lang-wrap { position:relative; } .nav-lang { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink); background:#fff; cursor:pointer; font-family:inherit; transition:border-color .15s ease, background .15s ease; } .nav-lang:hover, .nav-lang[aria-expanded="true"] { border-color:var(--teal-deep); background:var(--paper-2); } .nav-lang-flag { font-size:14px; line-height:1; } .nav-lang-code { letter-spacing:.04em; } .nav-lang-caret { transition:transform .2s ease; opacity:.6; } .nav-lang[aria-expanded="true"] .nav-lang-caret { transform:rotate(180deg); } .nav-lang-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:180px; padding:6px; margin:0; list-style:none; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(7,39,58,.12); z-index:80; } .nav-lang-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:14px; font-weight:500; color:var(--ink); text-decoration:none; transition:background .12s ease, color .12s ease; } .nav-lang-item:hover { background:var(--paper-2); color:var(--nvy-deep); } .nav-lang-item.is-active { color:var(--teal-deep); font-weight:600; } .nav-lang-item .nav-lang-flag { font-size:16px; } .nav-lang-item .nav-lang-label { flex:1; } .nav-lang-check { color:var(--teal-deep); flex-shrink:0; } html[dir="rtl"] .nav-lang-menu { right:auto; left:0; } /* Burger mobile */ .nav-desktop { display:flex; align-items:center; gap:26px; } .nav-burger { display:none; background:none; border:none; cursor:pointer; padding:8px; } .nav-mobile { display:none; } /* ========================================================================= WhatsApp flottant ========================================================================= */ .wa-fab { position:fixed; right:26px; bottom:26px; z-index:80; display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; text-decoration:none; padding:13px 20px; border-radius:999px; font-weight:700; font-size:14px; box-shadow:0 14px 30px -10px rgba(37,211,102,.6); } .wa-fab:hover { background:#1FB855; } /* ========================================================================= Footer ========================================================================= */ .site-footer { background:var(--ink); color:rgba(242,236,224,.72); padding:80px 0 32px; border-top:1px solid rgba(242,236,224,.14); } .site-footer .foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(242,236,224,.16); } .site-footer a { color:rgba(242,236,224,.72); text-decoration:none; transition:.2s; } .site-footer a:hover { color:var(--brass-soft); } .site-footer .foot-col-links { display:flex; flex-direction:column; gap:12px; font-size:14.5px; } .site-footer .foot-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:26px; font-size:12.5px; letter-spacing:.03em; color:rgba(242,236,224,.5); } /* ========================================================================= RTL — arabe ========================================================================= */ html[dir="rtl"] body { line-height:1.8; font-family:var(--ar-font); } html[dir="rtl"] .disp, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family:var(--ar-disp-font); } html[dir="rtl"] .eyebrow { letter-spacing:0; } html[dir="rtl"] .ddtop { letter-spacing:0; } html[dir="rtl"] .ddgroup > .ddmenu { left:auto; right:0; } html[dir="rtl"] .wa-fab { right:auto; left:26px; } html[dir="rtl"] [style*="uppercase"] { letter-spacing:0!important; } /* ========================================================================= Responsive ========================================================================= */ @media (max-width:1080px) { .shell { padding:0 24px; } } @media (max-width:1024px) { /* Sections home : passage en une colonne */ .hero-grid, .why-grid, .sig-grid, .serv-grid, .tun-head, .tun-collage, .contact-grid, .ix-head { grid-template-columns:1fr!important; } .hero-grid { gap:48px!important; } .why-intro { position:static!important; } .tun-collage > div[style*="span 2"] { grid-row:auto!important; } .step-grid { grid-template-columns:repeat(3,1fr)!important; row-gap:40px!important; } .step-line { display:none!important; } /* Pages médical */ .fiche-hero, .fiche-body, .pq-grid, .pq-diff-grid { grid-template-columns:1fr!important; } .fiche-body aside { position:static!important; } .pq-grid > div:first-child { border-right:none!important; padding-right:0!important; } .pq-grid > div:last-child { padding-left:0!important; } .pq-val-row { grid-template-columns:auto 1fr!important; row-gap:6px!important; } .pq-val-row p { grid-column:1/-1; } /* Réseau & Tunisie */ .tr-grid, .tun-hero-grid { grid-template-columns:1fr!important; } .tun-hero-grid > div[style*="span 2"] { grid-row:auto!important; } .tun-row-grid { grid-template-columns:repeat(2,1fr)!important; } /* Contenu & conversion */ .blog-feat, .reassure-grid { grid-template-columns:1fr!important; } .reassure-grid > div { border-right:none!important; padding-right:0!important; } } @media (max-width:620px) { .tun-row-grid { grid-template-columns:1fr!important; } } /* Contenu article de blog : titres/paragraphes lisibles */ .blog-content h2 { font-family:var(--disp-font); font-size:30px; color:var(--ink); margin:36px 0 14px; } .blog-content h3 { font-family:var(--disp-font); font-size:24px; color:var(--ink); margin:28px 0 12px; } .blog-content p { margin:0 0 18px; } .blog-content a { color:var(--brass); } .blog-content ul, .blog-content ol { margin:0 0 18px; padding-left:22px; } .blog-content img { margin:24px 0; } @media (max-width:900px) { .site-footer .foot-grid { grid-template-columns:1fr 1fr; } .nav-desktop { display:none; } .nav-burger { display:inline-flex; } .nav-mobile.open { display:block; } .nav-mobile { position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:75; background:var(--paper); border-left:1px solid var(--line); padding:88px 28px 28px; overflow-y:auto; box-shadow:-24px 0 60px -20px rgba(14,46,52,.4); } .nav-mobile a { display:block; padding:14px 0; border-bottom:1px solid var(--line-2); text-decoration:none; color:var(--ink); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:13px; } .serv-list { grid-template-columns:1fr!important; } .testi-grid { grid-template-columns:1fr!important; gap:40px!important; } .testi-grid > div { border-right:none!important; padding:0!important; } /* Ligne d'intervention : masquer la description sur petit écran */ .ix-row { grid-template-columns:48px 1fr 40px!important; } .ix-row .ix-desc { display:none!important; } } @media (max-width:620px) { .site-footer .foot-grid { grid-template-columns:1fr; } .wa-fab span { display:none; } .step-grid { grid-template-columns:repeat(2,1fr)!important; } } [x-cloak] { display:none!important; } /* ========================================================================= .home-v2 / .edito-v2 — vocabulaire « arche » (héritage laiton, re-teinté) Ancien scope de la home « Deux Rives » et des pages intérieures (arches, niches, duotone). Les couleurs sont désormais repointées vers la palette bleue via le :root global ; seule la STRUCTURE arche subsiste, en attendant sa refonte au template bleu. La home actuelle utilise le scope .homev2-blue. ========================================================================= */ /* Re-skin bleu : l'accent hérite désormais de l'azur global (ex-laiton). */ .home-v2 { --brass:var(--azur); --brass-soft:var(--sky); } /* ---- Maisons de location (catalogue + fiche) ---- */ @media (max-width:1024px) { .rent-grid { grid-template-columns:1fr 1fr!important; } .rent-detail { grid-template-columns:1fr!important; } .rent-detail .rent-form { position:static!important; } } @media (max-width:900px) { .rent-filters { grid-template-columns:1fr 1fr!important; } } @media (max-width:620px) { .rent-grid { grid-template-columns:1fr!important; } .rent-gallery { grid-template-columns:1fr 1fr!important; } .rent-filters { grid-template-columns:1fr!important; } } /* arch = rectangle à sommet semi-circulaire */ .home-v2 .arch { border-radius:9999px 9999px 10px 10px; overflow:hidden; position:relative; background:var(--chalk-3); } .home-v2 .arch .duo, .home-v2 .arch img, .home-v2 .arch > div { filter:grayscale(var(--duo-gray)) contrast(1.04) brightness(1.02); display:block; width:100%; height:100%; } .home-v2 .arch::after { content:""; position:absolute; inset:0; background:var(--ink); mix-blend-mode:multiply; opacity:var(--duo-ink); pointer-events:none; } .home-v2 .arch::before { content:""; position:absolute; inset:0; z-index:2; background:var(--cobalt); mix-blend-mode:soft-light; opacity:var(--duo-blue); pointer-events:none; } .home-v2 .archline { position:absolute; inset:0; border:1px solid var(--brass); border-radius:inherit; pointer-events:none; z-index:3; } /* Ruban de confiance défilant */ @keyframes marq { to { transform:translateX(-50%); } } /* Niches spécialités */ .home-v2 .niche { transition:transform .45s cubic-bezier(.2,.7,.2,1); } .home-v2 .niche:hover { transform:translateY(-10px); } .home-v2 .niche:hover .archline { border-color:var(--cobalt); } .home-v2 .niche:hover .n-name { color:var(--cobalt)!important; } /* Étapes du parcours */ .home-v2 .step:hover { background:var(--chalk)!important; } .home-v2 .step:hover .s-idx { color:var(--cobalt)!important; } /* Boutons hero (base inline dans la vue, hover réel ici) */ .home-v2 .btn-ink:hover { background:var(--brass)!important; color:var(--ink)!important; } .home-v2 .btn-line:hover { border-color:var(--cobalt)!important; color:var(--cobalt)!important; } .home-v2 .navlink { position:relative; } .home-v2 .navlink::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--brass); transition:width .28s; } .home-v2 .navlink:hover::after { width:100%; } .home-v2 .btn-cta-chalk:hover { background:var(--brass)!important; color:var(--ink)!important; } .home-v2 .btn-cta-outline:hover { border-color:var(--chalk)!important; } /* Responsive home v2 */ @media (max-width:1024px) { .home-v2 .hero-grid { grid-template-columns:1fr!important; gap:48px!important; } .home-v2 .dr-grid { grid-template-columns:1fr!important; } .home-v2 .sp-grid { grid-template-columns:repeat(3,1fr)!important; row-gap:36px!important; } .home-v2 .par-grid { grid-template-columns:repeat(3,1fr)!important; } .home-v2 .par-grid .step:nth-child(3) { border-right:none!important; } } @media (max-width:900px) { .home-v2 .sp-head { flex-direction:column; align-items:flex-start!important; } .home-v2 .hero-stats { flex-wrap:wrap; gap:28px!important; } } @media (max-width:620px) { .home-v2 .sp-grid { grid-template-columns:repeat(2,1fr)!important; } .home-v2 .par-grid { grid-template-columns:1fr!important; } .home-v2 .par-grid .step { border-right:none!important; border-bottom:1px solid var(--line); } .home-v2 .hero-card { left:0!important; } .home-v2 .hero-jci { right:0!important; } } /* RTL — home v2 */ html[dir="rtl"] .home-v2 .navlink::after { left:auto; right:0; } html[dir="rtl"] .home-v2 .hero-card { left:auto!important; right:-46px; } html[dir="rtl"] .home-v2 .hero-jci { right:auto!important; left:-30px; } /* ========================================================================= ÉDITORIAL PARTAGÉ (.edito-v2) Généralise le vocabulaire « Deux Rives » de la home (arche, filet laiton, niches, arches fantômes, panneaux pleins) aux pages intérieures médicales. Mêmes primitives que .home-v2, mais réutilisables hors accueil. ========================================================================= */ /* Re-skin bleu : l'accent hérite désormais de l'azur global (ex-laiton). */ .edito-v2 { --brass:var(--azur); --brass-soft:var(--sky); } /* arch = rectangle à sommet semi-circulaire + duotone cobalt */ .edito-v2 .arch { border-radius:9999px 9999px 10px 10px; overflow:hidden; position:relative; background:var(--chalk-3); } .edito-v2 .arch .duo, .edito-v2 .arch img, .edito-v2 .arch > div { filter:grayscale(var(--duo-gray)) contrast(1.04) brightness(1.02); display:block; width:100%; height:100%; } .edito-v2 .arch::after { content:""; position:absolute; inset:0; background:var(--ink); mix-blend-mode:multiply; opacity:var(--duo-ink); pointer-events:none; } .edito-v2 .arch::before { content:""; position:absolute; inset:0; z-index:2; background:var(--cobalt); mix-blend-mode:soft-light; opacity:var(--duo-blue); pointer-events:none; } .edito-v2 .archline { position:absolute; inset:0; border:1px solid var(--brass); border-radius:inherit; pointer-events:none; z-index:3; } /* Arche fantôme décorative (bordure semi-circulaire en filigrane) */ .edito-v2 .ghost-arch { position:absolute; border:1px solid var(--line); border-radius:9999px 9999px 0 0; pointer-events:none; } .edito-v2 .ghost-arch.on-ink { border-color:rgba(244,241,233,.16); } /* Niches (cartes qui lèvent au survol) */ .edito-v2 .niche { transition:transform .45s cubic-bezier(.2,.7,.2,1); } .edito-v2 .niche:hover { transform:translateY(-10px); } .edito-v2 .niche:hover .archline { border-color:var(--cobalt); } .edito-v2 .niche:hover .n-name { color:var(--cobalt)!important; } /* Étapes numérotées */ .edito-v2 .step:hover { background:var(--chalk)!important; } .edito-v2 .step:hover .s-idx { color:var(--cobalt)!important; } /* Lien souligné animé + boutons éditoriaux */ .edito-v2 .navlink { position:relative; } .edito-v2 .navlink::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--brass); transition:width .28s; } .edito-v2 .navlink:hover::after { width:100%; } .edito-v2 .btn-ink:hover { background:var(--brass)!important; color:var(--ink)!important; } .edito-v2 .btn-line:hover { border-color:var(--cobalt)!important; color:var(--cobalt)!important; } .edito-v2 .btn-cta-chalk:hover { background:var(--brass)!important; color:var(--ink)!important; } .edito-v2 .btn-cta-outline:hover { border-color:var(--chalk)!important; } /* Responsive éditorial partagé */ @media (max-width:1024px) { .edito-v2 .edito-grid-2 { grid-template-columns:1fr!important; } .edito-v2 .sp-grid { grid-template-columns:repeat(3,1fr)!important; row-gap:36px!important; } .edito-v2 .par-grid { grid-template-columns:repeat(3,1fr)!important; } .edito-v2 .par-grid .step:nth-child(3) { border-right:none!important; } } @media (max-width:620px) { .edito-v2 .sp-grid { grid-template-columns:repeat(2,1fr)!important; } .edito-v2 .par-grid { grid-template-columns:1fr!important; } .edito-v2 .par-grid .step { border-right:none!important; border-bottom:1px solid var(--line); } } html[dir="rtl"] .edito-v2 .navlink::after { left:auto; right:0; } /* ========================================================================= HOME « BLEU CLINIQUE » (.homev2-blue) Nouvelle DA de la home : navy + azur + fonds bleutés clairs, cartes photo, carrousel, carte interactive. Scopée sur la home uniquement — les autres pages restent en laiton/craie tant qu'elles ne sont pas migrées. Fidèle au