/* Shared responsive rules, loaded after each page stylesheet. */
html { -webkit-text-size-adjust:100%; scroll-padding-top:100px; }
body { min-width:0; }
:where(main, section, article, form, [class*="grid"], [class*="shell"]) { min-width:0; }
:where(h1,h2,h3,h4,p,a,small,label) { overflow-wrap:break-word; }
:where(button,a,input,textarea,select):focus-visible { outline:3px solid #d98221; outline-offset:4px; }
:where(button,a,input,textarea,select) { touch-action:manipulation; }
:where(input,textarea,select) { max-width:100%; }
:where(video,iframe) { max-width:100%; }
.nav-toggle { min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.navbar .logo { flex-shrink:0; }
.navbar .nav-links a { white-space:nowrap; }
.prodv2-calendar { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.prodv2-calendar:focus-visible { outline-offset:-3px; }
.calendar-scroll-hint { display:none; }
@media (max-width:1199px) {
  .navbar, .navbar.scrolled { top:10px; padding-inline:12px; }
  .navbar .nav-shell, .navbar.scrolled .nav-shell, .navbar.menu-open .nav-shell {
    width:100%; max-width:100%; height:62px; padding:0 14px; gap:12px;
  }
  .navbar .logo img { width:auto; height:40px; max-width:190px; object-fit:contain; }
  .navbar .nav-toggle { display:flex; margin-left:auto; }
  .navbar .nav-actions {
    display:none; position:absolute; top:72px; left:12px; right:12px;
    flex-direction:column; align-items:stretch; gap:10px; padding:16px;
    max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px);
    overflow-y:auto; overscroll-behavior:contain;
    background:#fff; border-radius:20px; box-shadow:0 12px 32px #0003;
  }
  .navbar.menu-open .nav-actions { display:flex; }
  .navbar .nav-links, .navbar .nav-links.open {
    position:static; display:flex; flex-direction:column; align-items:stretch;
    transform:none; width:100%; padding:0; gap:0; box-shadow:none; background:none;
  }
  .navbar .nav-links a { display:flex; align-items:center; min-height:44px; padding:10px 12px; }
  .navbar .nav-links a.active::after { left:12px; width:28px; }
  .navbar .nav-links .divider { display:none; }
  .navbar .nav-cta { display:block; min-height:44px; text-align:center; }
}
@media (max-width:1024px) {
  .hm-hero, .about-hero, .qlv2-fullhero, .susv2-fullhero, .fdnv2-fullhero {
    height:auto; min-height:100svh;
  }
  .hm-hero-inner, .about-hero-inner, .qlv2-fullhero-inner, .susv2-fullhero-inner, .fdnv2-fullhero-inner {
    padding-top:130px; padding-bottom:56px; min-width:0;
  }
  .hm-hero-inner { flex-wrap:wrap; }
  .avortraf-mv-grid, .qlv2-security-grid, .prodv2-corn-grid { grid-template-columns:minmax(0,1fr); }
  .hm-export-section { height:auto; min-height:0; padding:64px 24px; }
  .hm-export-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-partners-card-head, .hm-export-head { grid-template-columns:54px minmax(0,1fr); gap:18px; }
  .hm-partners-card-head p, .hm-export-head p { grid-column:1 / -1; max-width:100%; }
  .hm-partners-card-head h3::after, .hm-export-head h2::after { display:none; }
  .avortraf-who-grid, .avortraf-reach-grid, .avortraf-contact-grid { grid-template-columns:minmax(0,1fr); }
  .avortraf-reach-stacked .avortraf-map { width:100%; max-width:100%; margin:0; }
}
@media (max-width:760px) {
    .susv2-social-layout {
    display: flex;
    flex-direction: column;
}
.susv2-social-media {
    min-height: 500px;
}
  :root { --hero-title-size:clamp(2.15rem,8.5vw,3.5rem); --hero-lead-size:1rem; }
  .global-wrapper, .container { padding-inline:20px; }
  .avortraf-shell, .prodv2-shell, .fdnv2-shell { width:calc(100% - 40px); max-width:100%; }
  .hm-hero-inner, .about-hero-inner, .qlv2-fullhero-inner, .susv2-fullhero-inner, .fdnv2-fullhero-inner {
    padding-top:120px; padding-bottom:40px;
  }
  .hm-hero h1, .about-hero h1, .qlv2-fullhero h1, .susv2-fullhero h1, .fdnv2-fullhero h1 {
    font-size:var(--hero-title-size); overflow-wrap:anywhere;
  }
  .hm-stamp, .qlv2-fullhero-chip { display:none; }
  .avortraf-section, .prodv2-section { padding-block:60px; }
  .avortraf-section h2, .avortraf-section h2.avortraf-values-title,
  .prodv2-section h2, .fdnv2-section h2, .qlv2-certs-copy h2 {
    font-size:clamp(2rem,8.4vw,3rem); line-height:1.12; overflow-wrap:anywhere;
  }
  .avortraf-section h2 {
    margin-bottom: 2rem;
}
  .avortraf-mv-card { padding:28px 24px; }
  .avortraf-values { min-height:0; }
  .avortraf-values-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .avortraf-collage { min-height:0; height:auto; transform:none; margin:0; }
  .who-collage-img { width:100%; height:auto; }
  .hm-ph-row.hm-ph-row-solo { grid-template-columns:minmax(0,1fr); gap:24px; }
  /* Pastille de marque : plus compacte sur telephone. */
  .hm-ph-item { gap:12px; }
  .hm-ph-badge img, .hm-ph-media .hm-ph-badge img { height:42px; }
  .hm-partners-showcase.hm-partners-showcase-solo { padding:60px 20px; }
  .hm-partners-card { padding:0; }
  .hm-partners-grid { gap:16px; }
  .hm-export-section { padding:60px 20px; }
  .hm-export-grid a { min-width:0; }
  .hm-partners-card-head h3, .hm-export-head h2 { padding:0; font-size:1.05rem; letter-spacing:1.5px; }
  .pv-icon-row, .pv-icon-row.pv-icon-row-32 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
  .pv-icon-row > * { width:auto; min-width:0; margin:0; }
  .prodv2-calendar-card { padding:24px 10px; }
  .calendar-scroll-hint { display:block; margin:12px 0; font-size:.85rem; }
  /* Calendrier sur telephone : la colonne des varietes prenait 160px, soit
     la moitie de l'ecran, et il ne restait que deux mois et demi visibles.
     Colonne resserree et tableau moins large : on voit 5 a 6 mois d'un coup. */
  .prodv2-months, .prodv2-cal-row { min-width:640px; grid-template-columns:118px repeat(10,minmax(0,1fr)); }
  .prodv2-cal-group { min-width:640px; }
  .prodv2-cal-row span { padding-left:12px; font-size:.92rem; }
  .prodv2-months b { font-size:.72rem; letter-spacing:.5px; }
  .prodv2-cal-group > span { font-size:.78rem; }
  .qlv2-security-media { height:auto; }
  /* Le bandeau photo reste volontairement glissable a l'horizontale (cf. sustainability.css) :
     on ne force donc ni le nombre de colonnes ni overflow, qui etaient de toute facon perdants. */
  .susv2-photo-mosaic { gap:12px; }
  .susv2-photo-mosaic img:nth-child(n) { width:100%; height:210px; margin:0; transform:none; }
  .fdnv2-pillar-row, .fdnv2-pillar-row--reverse { flex-direction:column; grid-template-columns:minmax(0,1fr); }
  .fdnv2-pillar-row-content { padding:28px 20px; }
  .fdnv2-pillar-row-media { width:100%; min-height:240px; }
  .avortraf-contact-copy { padding-bottom:0; }
  .avortraf-contact-list li { overflow-wrap:anywhere; }
  .avortraf-form { padding:24px 18px; }
  .avortraf-form .form-row { grid-template-columns:minmax(0,1fr); }
  .avortraf-form input, .avortraf-form textarea, .avortraf-form select { font-size:16px; min-width:0; }
  .page-hero { height:auto; min-height:360px; padding:120px 20px 64px; }
  footer { padding:56px 0 24px; }
  footer .footer-top { gap:24px; flex-wrap:wrap; }
  footer .footer-cols { grid-template-columns:minmax(0,1fr); flex-direction:column; }
  footer .footer-cols p { overflow-wrap:anywhere; }
  footer .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  footer .social-icons a { width:44px; height:44px; }
  /* A normal scrolling timeline keeps every year readable on touch screens. */
  .story-scroll { height:auto; min-height:0; overflow:visible; padding-top:94px; }
  .story-years { position:sticky; top:82px; left:auto; right:auto; width:100%; padding:12px 20px; background:#07130d; margin:0; }
  .story-year-btn { min-height:44px; }
  .story-swiper, .story-swiper .swiper-wrapper { height:auto; display:block; transform:none !important; }
  .story-swiper .swiper-slide { height:auto; min-height:560px; padding:70px 20px; display:flex; align-items:center; opacity:1 !important; transform:none !important; pointer-events:auto !important; scroll-margin-top:155px; }
  .story-panel, .swiper-slide-active .story-panel { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; opacity:1; transform:none; translate:0; pointer-events:auto; }
  .story-panel-year { font-size:clamp(4rem,20vw,6rem); }
  .story-panel h3 { overflow-wrap:anywhere; }
}
@media (max-width:480px) {
  .hm-export-grid, .hm-partners-grid { grid-template-columns:minmax(0,1fr); }
  .avortraf-stats-grid { gap:32px 16px; }
  .avortraf-stat small { font-size:.8rem; }
  .susv2-photo-mosaic img:nth-child(n) { height:160px; }
  .fdnv2-hero-actions, .hm-hero-actions { align-items:stretch; flex-direction:column; gap:14px; }
  .fdnv2-hero-actions a, .hm-hero-actions a { text-align:center; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal, .hm-hero h1, .hm-hero p, .hm-hero-actions { opacity:1 !important; transform:none !important; }
  .avortraf-values, .avortraf-mv-section { background-attachment:scroll; }
  .pk-marquee, .qlv2-certs-marquee { overflow-x:auto; }
}

.avortraf-form .form-field { display:flex; flex-direction:column; gap:8px; font-size:.85rem; font-weight:600; min-width:0; }

/* ===========================================================
   Passe responsive — finitions mobile / tablette (2026-09-16)
   =========================================================== */

/* -- Tablette et en dessous : tout ce qui se touche au doigt -------------- */
@media (max-width:1024px) {
  /* Boutons d'annees de la frise : 31px de haut, sous le seuil tactile. */
  .story-year-btn { min-height:44px; padding-inline:14px; }

  /* Liens du pied de page : 18px de haut, impossibles a viser. */
  footer .footer-links { gap:2px 28px; }
  footer .footer-links a { display:inline-flex; align-items:center; min-height:44px; }
  .avortraf-contact-list a { display:inline-flex; align-items:center; min-height:44px; }

  /* Micro-libelles : plancher a 12px, en dessous c'est illisible. */
  .hm-label,
  .avortraf-kicker,
  .hm-export-grid span,
  .hm-partners-grid span,
  .qlv2-fullhero-chip small { font-size:.78rem; }

  /* Cartes-logos : 312px de haut pour un logo de 96px, soit un mur de vide
     a faire defiler. On resserre la carte autour de son contenu. */
  .hm-export-grid a { min-height:0; padding:28px 20px 24px; }
  .hm-export-grid img,
  .hm-export-grid a:nth-child(n) img { height:84px; max-width:100%; margin-bottom:18px; }
  .hm-partners-grid article { min-height:0; padding:24px 18px 20px; }
  .hm-partners-grid img,
  .hm-partners-grid article:nth-child(n) img { height:88px; max-width:100%; margin-bottom:16px; }

  /* Hauteurs minimales calibrees pour le desktop : empilees, elles laissent
     des ecrans de vide. La grille egalise deja les hauteurs de ligne. */
  .avortraf-reach, .avortraf-reach-stacked { min-height:0; }
  .avortraf-values-grid article { min-height:0; }
  .susv2-photo-ribbon.susv2-photo-mosaic { min-height:0; }
}

@media (max-width:860px) {
  .avortraf-stat-num { font-size:clamp(1.5rem,5.2vw,2.4rem); }
  /* Le cercle d'icone de 134px ecrasait le chiffre, qui est l'information. */
  .avortraf-stat { padding:26px 14px 24px; }
  .avortraf-stat-icon { width:96px; height:96px; margin-bottom:14px; }
  .avortraf-stat-icon .icon { width:44px; height:44px; }
  .avortraf-stat-icon::after { width:12px; height:12px; right:6px; bottom:6px; }
}

/* -- Telephone ----------------------------------------------------------- */
@media (max-width:760px) {
  /* Calendrier : le tableau glisse a l'horizontale, mais le nom de la variete
     partait avec lui. On l'epingle a gauche pour garder la ligne lisible. */
  .prodv2-cal-row span,
  .prodv2-months > span:first-child {
    position:sticky;
    left:0;
    z-index:2;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:8px 0 12px -8px rgba(80,55,22,.22);
  }
  .prodv2-months > span:first-child { z-index:3; }
  /* Les intitules de groupe partaient aussi hors ecran : on epingle leur texte. */
  .prodv2-cal-group { padding-left:0; }
  .prodv2-cal-group > span {
    position:sticky;
    left:0;
    display:inline-block;
    padding:0 18px 0 22px;
  }

  .hm-export-grid a { padding:24px 18px 20px; }
  .hm-export-grid img,
  .hm-export-grid a:nth-child(n) img { height:72px; margin-bottom:16px; }
  .hm-partners-grid article { padding:22px 16px 18px; }
  .hm-partners-grid img,
  .hm-partners-grid article:nth-child(n) img { height:78px; margin-bottom:14px; }

  /* Fondation : les deux photos cote a cote devenaient illisibles (panneau
     coupe, groupe rogne). On les empile, elles restent deux photos separees. */
  .fdnv2-pillar-row-media--split { grid-template-columns:minmax(0,1fr); min-height:0; }
  .fdnv2-pillar-row-media--split > img { height:220px; object-fit:cover; }

  /* Pied de page : les 4 lignes de contact avaient un rythme irregulier
     (serrees par paires, puis un trou entre les deux colonnes). */
  footer .footer-cols { gap:12px; }
  footer .footer-cols > div { display:flex; flex-direction:column; gap:12px; }
  footer .footer-cols p { display:flex; align-items:flex-start; gap:10px; margin:0; }
  footer .footer-cols p .icon { flex:0 0 auto; margin-top:3px; }
}

@media (max-width:480px) {
  /* petits telephones : on resserre encore un peu, et la carte du calendrier
     prend presque toute la largeur de l'ecran pour gagner des mois visibles */
  .prodv2-calendar-card { padding:20px 6px; }
  .prodv2-calendar-section .prodv2-shell,
  .prodv2-calendar-card { width:auto; max-width:100%; }
  .prodv2-months, .prodv2-cal-row { min-width:600px; grid-template-columns:104px repeat(10,minmax(0,1fr)); }
  .prodv2-cal-group { min-width:600px; }
  .prodv2-cal-row span { padding-left:10px; font-size:.82rem; }  /* .86rem faisait passer "White Grapes" sur deux lignes */
  .avortraf-stat-num { font-size:clamp(1.35rem,6.2vw,1.9rem); }
  .avortraf-stat-icon { width:84px; height:84px; }
  .avortraf-stat-icon .icon { width:38px; height:38px; }
}