/* ==========================================================================
   Alexandre Tanguay, assurance de personnes
   Feuille de style unique. Aucune dépendance externe.
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------
     Palette iA Groupe financier
     Codes relevés directement dans les feuilles de style de ia.ca.
     Ne pas modifier sans valider auprès des normes graphiques d'iA.
     ------------------------------------------------------------------ */
  /* --- Les deux couleurs de tête ---------------------------------- */
  --ia-blue:#003da6;        /* BLEU DE MARQUE, celui du logo, dominant */
  --ia-grey:#7d878f;        /* GRIS ÉLÉPHANT, neutre de marque         */

  /* --- Échelle de gris dérivée de #7D878F -------------------------
     Même teinte (207°), même saturation : la famille reste celle du
     gris de marque, mais chaque niveau atteint le contraste requis.  */
  --grey-50:#f4f5f6;        /* fond des sections alternées              */
  --grey-200:#d9dcde;       /* bordures et filets                       */
  --grey-300:#c3c8cc;       /* texte courant sur fond marine  (9,5:1)   */
  --grey-600:#656f77;       /* mentions et libellés sur blanc (5,1:1)   */
  --grey-700:#4c565e;       /* texte courant sur blanc        (7,5:1)   */

  /* --- Bleus de soutien ------------------------------------------- */
  --ia-navy:#01233f;        /* marine profond, fonds foncés et titres   */
  --ia-blue-bright:#064dd9; /* bleu interactif, boutons et liens        */
  --ia-blue-light:#2962ff;  /* bleu d'accent clair                      */
  --ia-sky:#73c4ef;         /* surtitres sur fond marine                */
  --ia-tint:#dbf0ff;        /* teinte pâle                              */
  --ia-tint-deep:#c7e7ff;   /* teinte pâle soutenue                     */

  /* --- Couleurs d'état -------------------------------------------- */
  --ia-orange:#ef6d19;      /* orange d'alerte                          */
  --ia-cream:#fff4de;       /* fond d'encadré d'avertissement           */
  --ia-green:#318500;       /* vert de succès                           */
  --ia-red:#e71313;         /* rouge d'erreur                           */

  /* Conservé pour compatibilité avec les règles existantes */
  --ia-neutral:var(--grey-50);
  --ia-line:var(--grey-200);

  /* Alias fonctionnels. Le reste de la feuille s'appuie sur ceux-ci */
  --navy-900:var(--ia-navy);
  --navy-800:var(--ia-blue);
  --navy-700:var(--ia-blue);
  --navy-100:var(--ia-tint);
  --navy-50:var(--ia-neutral);

  --accent:var(--ia-blue-bright);
  --accent-dark:var(--ia-blue);
  --accent-soft:var(--ia-tint);

  /* Gris de texte, tirés de l'échelle dérivée de #7D878F ci-dessus.
     #7D878F lui-même plafonne à 3,7:1 sur blanc : il sert aux filets,
     aux pictogrammes et aux gros caractères, jamais au texte courant. */
  --ink:var(--ia-navy);
  --ink-soft:var(--grey-700);
  --ink-faint:var(--grey-600);
  --line:var(--grey-200);
  --white:#ffffff;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(11,31,56,.08);
  --shadow:0 4px 20px rgba(11,31,56,.10);
  --shadow-lg:0 12px 40px rgba(11,31,56,.14);

  --wrap:1140px;
  --gap:clamp(1.5rem,4vw,3rem);

  /* Avenir Next est une police commerciale : elle n'est pas distribuée
     avec le site. Elle s'affiche chez les visiteurs qui l'ont installée
     (macOS et iOS la fournissent d'origine). Ailleurs, et notamment sur la
     majorité des postes Windows, la pile bascule sur Segoe UI.
     Pour l'afficher chez tout le monde, voir le bloc @font-face plus bas. */
  --font:"Avenir Next","Avenir Next LT Pro","Avenir Next World",Avenir,
         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font);
}

/* ---------------------------------------------------------------------------
   AVENIR NEXT AUTO-HÉBERGÉ (bloc désactivé)
   ---------------------------------------------------------------------------
   À activer seulement si tu obtiens les fichiers de police sous licence
   (iA détient vraisemblablement une licence corporative ; demande le kit de
   marque avec les fichiers .woff2). Héberger une police commerciale sans
   licence est une infraction au droit d'auteur.

   1. Dépose les fichiers dans site/fonts/
   2. Retire les balises de commentaire ci-dessous
   3. Rien d'autre à changer : --font pointe déjà sur « Avenir Next »

@font-face{
  font-family:"Avenir Next";
  src:url("../fonts/avenir-next-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Avenir Next";
  src:url("../fonts/avenir-next-demibold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Avenir Next";
  src:url("../fonts/avenir-next-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
--------------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

/* L'attribut `hidden` doit l'emporter sur toute règle de `display` écrite
   plus bas. Sans ce !important, un élément masqué qui porte aussi une
   classe comme `.btn` (display:inline-block) resterait visible : la règle
   d'auteur bat celle du navigateur. */
[hidden]{display:none!important}
/* l'en-tete est collant sur 74px : sans marge, une ancre atterrit dessous */
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ia-blue);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ia-blue-bright)}

/* Avenir Next est une géométrique : à grande taille elle demande un
   crénage plus serré et un gras moins appuyé qu'un serif. */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;color:var(--navy-900);margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.9px;font-weight:600}
h2{font-size:clamp(1.6rem,3.5vw,2.3rem);letter-spacing:-.5px;font-weight:600}
h3{font-size:1.2rem;letter-spacing:-.2px;font-weight:600}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.section{padding-block:clamp(3.5rem,8vw,6rem)}
.section--tint{background:var(--navy-50)}
.section--navy{background:var(--ia-navy);color:#c8dcf0}
.section--navy h2,.section--navy h3{color:var(--white)}
.section--navy .lede{color:#c8dcf0}
.section--navy .credential-note{text-align:left;margin-top:1.25rem}
.section--navy .credential-note a{color:var(--ia-sky);font-weight:600}
.section--navy .credential-note a:hover{color:var(--white)}
/* les cartes restent claires sur fond foncé, leurs titres gardent l'encre du site */
.section--navy .card h3{color:var(--navy-900)}

/* ---------- Justification ----------
   La césure automatique n'est pas une option : sans elle, la justification
   étire les espaces entre les mots et creuse des rivières de blanc dans la
   colonne, d'autant plus en français où les mots sont longs. Elle s'appuie
   sur l'attribut `lang` de la page, qui est bien renseigné (fr-CA / en-CA).

   Portée limitée aux blocs de prose : une colonne étroite ou un bloc centré
   justifié devient illisible, la justification n'ayant plus assez de mots
   par ligne pour répartir le blanc. */
.narrow > p:not(.lede),
.narrow > ul li,
.split > div:not(.hero__card) > p:not(.lede),
.faq details p{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
}

/* Ce qui reste aligné à gauche, et pourquoi : intros (courtes et plus
   grandes), blocs centrés, colonnes étroites, encadrés et formulaires. */
.lede,
.center p,
.cta p,
.card p,
.hero__card li,
.step p,
.notice,
.hero p{
  text-align:left;
  hyphens:manual;
  -webkit-hyphens:manual;
}
/* `.center p` (0,2,0) l'emporte sur l'heritage de `.center` : chaque enfant
   centre doit etre rattrape nommement, surtitre compris. */
.center .lede,.center .eyebrow,
.cta .lede,.cta .eyebrow{text-align:center}

/* Sous 620 px, la colonne descend sous ~55 caractères par ligne. À cette
   largeur la justification a trop peu de mots pour répartir le blanc, et
   la césure automatique ne la sauve que si le navigateur dispose du
   dictionnaire de la langue, ce qui n'est pas garanti (Chrome les télécharge
   à la demande). On revient donc au fer à gauche plutôt que de parier. */
@media (max-width:620px){
  .narrow > p:not(.lede),
  .narrow > ul li,
  .split > div:not(.hero__card) > p:not(.lede),
  .faq details p{text-align:left}
}

.lede{font-size:1.15rem;color:var(--ink-soft);max-width:62ch}
.eyebrow{
  font-family:var(--font);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);
  margin:0 0 .9rem;
}
.section--navy .eyebrow,.hero .eyebrow,.cta .eyebrow,.banniere .eyebrow{color:var(--ia-sky)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.narrow{max-width:70ch}

/* Piège à robots. Retiré du flux plutôt que masqué par `display:none`,
   que plusieurs robots savent reconnaître et contourner. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Un groupe conditionnel peut porter deux questions. Sans separation, les
   deux series d'options se lisent comme une seule liste. */
.groupe .choix + .choix{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}

/* Groupe resté sans réponse sur le formulaire du concours. */
.groupe.groupe--manquant{
  border-left:3px solid var(--ia-orange);padding-left:1rem;
  border-radius:0 var(--radius) var(--radius) 0;
}
.groupe-erreur{
  margin:.6rem 0 0;font-size:.88rem;font-weight:600;color:#a03d00;
}

/* ---------- Accessibilité ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy-900);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Barre d'appel rapide ----------
   Le numéro en toutes lettres coûte environ 160 px, et l'en-tête n'a pas
   cette marge. Il occupe donc sa propre bande, au-dessus, qui défile avec
   la page. Elle tient jusqu'à 620 px, donc sur tablette et sur écran vertical
   le numéro reste écrit en toutes lettres. En deçà seulement, elle cède la
   place au bouton d'appel de l'en-tête collant. */
.barre-utile{background:var(--grey-50);border-bottom:1px solid var(--line)}
.barre-utile .wrap{
  display:flex;justify-content:flex-end;align-items:center;
  min-height:36px;max-width:1240px;
}
.barre-utile a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.87rem;color:var(--ink-soft);text-decoration:none;
}
.barre-utile a:hover{color:var(--ia-blue-bright)}
.barre-utile a span{font-weight:700;color:var(--ia-blue)}
.barre-utile__accroche{font-weight:400;color:var(--ink-soft)}
/* Bouton d'appel, réservé aux vrais téléphones. Sur tablette et sur écran
   vertical, la bande a toute la place et le numéro reste écrit en toutes
   lettres : un pictogramme y serait une perte d'information. */
.tel-mobile{display:none}
.tel-mobile svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* Sous 620 px, la bande cède la place au bouton, logé dans l'en-tête collant :
   « Une question rapide ? » plus le numéro ne tiennent plus sur une ligne. */
@media (max-width:620px){
  .barre-utile{display:none}
  .tel-mobile{
    display:grid;place-items:center;order:2;flex:0 0 auto;
    width:42px;height:42px;border:1px solid var(--line);
    border-radius:var(--radius);color:var(--ia-blue);
    background:var(--white);text-decoration:none;
  }
  .tel-mobile:hover{border-color:var(--ia-blue);color:var(--ia-blue-bright)}
  .nav-toggle{order:3}
}

.barre-utile svg{
  width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--ia-blue);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- En-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:74px;max-width:1240px}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand__mark{width:auto;height:40px;flex:0 0 auto}
.brand__texte{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--navy-900);white-space:nowrap}
.brand__role{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;white-space:nowrap}

/* Lockup « rattaché à iA Groupe financier ».
   Les deux fichiers, français et anglais, sont détournés au plus près :
   la hauteur déclarée correspond donc à la hauteur réellement visible, et
   une seule valeur suffit pour les deux langues. Le dégagement autour du
   logo vient du padding du conteneur, pas de vide dans l'image. */
/* Pas de margin-right:auto ici. L espace elastique doit se trouver APRES
   le selecteur de langue, sinon il s accumule juste a droite du logo et sa
   valeur depend de la largeur de la navigation, qui n est pas la meme en
   francais et en anglais. Le degagement du logo resterait alors different
   d une langue a l autre. */
.brand-ia{
  display:flex;align-items:center;gap:.15rem;
  flex:0 0 auto;
  padding-left:1.1rem;border-left:2px solid var(--ia-grey);
}
.brand-ia__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* 34 px : seuil sous lequel « Groupe financier » cesse d'être lisible.
   Même valeur pour les deux langues, les deux fichiers étant détourés. */
.brand-ia img{width:auto;height:34px;display:block}

/* Le libellé disparaît dès 1200 px : c'est l'élément le plus coûteux de
   l'en-tête (≈85 px) et le logo se suffit à lui-même. */
@media (max-width:1240px){
  .brand-ia__label{display:none}
  .brand-ia{padding-left:.9rem}
  .brand-ia img{height:30px}
}
/* Sous 520 px, quatre éléments se disputent la largeur : marque, logo iA,
   sélecteur de langue et menu. Le sous-titre « Assurance de personnes » est
   ce qui coûte le plus cher : il est plus large que le nom lui-même : et
   c'est aussi le plus redondant : le contenu de la page le dit déjà.
   On le masque donc, plutôt que de rapetisser le logo ou d'enterrer le
   sélecteur de langue dans le menu déroulant. */
/* Sous 520 px, cinq éléments se disputent 375 px : monogramme, nom,
   logo iA, sélecteur de langue et menu. Le nom en toutes lettres est ce qui
   coûte le plus cher (près de 150 px) et c est le plus redondant : le
   monogramme porte déjà les initiales, et le nom figure dans le titre de la
   page comme au pied. On le masque donc, plutôt que d écarter le logo iA ou
   d enterrer le sélecteur de langue dans le menu déroulant. */
@media (max-width:520px){
  .brand__texte{display:none}
  .brand__mark{height:36px}
  /* L'en-tête peut serrer les bords de plus près que le corps du texte :
     c'est une barre d'outils, pas du contenu à lire. */
  .site-header .wrap{gap:.5rem;padding-inline:.7rem}
  .brand__role{display:none}
  .brand__name{font-size:1.02rem}
  .brand-ia{padding-left:.5rem}
  .brand-ia img{height:26px}
  .lang{padding:1px}
  .lang a{padding:.3rem .38rem}
}

/* ---------- Pictogrammes ----------
   Tracés au trait, hérités en currentColor : chaque pictogramme prend la
   couleur de son conteneur. Aucun émoji, aucune police d'icônes, aucun
   fichier externe. */
.card__icon svg,
.contact-list .ico svg,
.nav-toggle svg{
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}
.card__icon svg{width:24px;height:24px;color:var(--ia-blue)}
.contact-list .ico svg{width:19px;height:19px;color:var(--ia-blue)}
.nav-toggle svg{width:20px;height:20px;stroke-width:1.9}

.icone-confirmation{display:flex;justify-content:center;margin-bottom:.4rem}
.icone-xl{
  width:66px;height:66px;fill:none;stroke:var(--ia-blue);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Sélecteur de langue ---------- */
/* Deux URL distinctes, pas de bascule JavaScript : les moteurs de recherche
   doivent pouvoir indexer chaque langue séparément. Le français reste la
   version par défaut (hreflang x-default pointe vers la racine). */
.lang{
  display:flex;align-items:center;gap:2px;flex:0 0 auto;
  margin-right:auto;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:2px;background:var(--white);
}
.lang a{
  font-size:.76rem;font-weight:700;letter-spacing:.04em;
  padding:.32rem .5rem;border-radius:7px;line-height:1;
  color:var(--grey-600);text-decoration:none;
  transition:background .15s,color .15s;
}
.lang a:hover{background:var(--grey-50);color:var(--ia-navy)}
.lang a[aria-current="true"]{background:var(--ia-blue);color:var(--white)}

@media (max-width:520px){
  .lang a{font-size:.72rem;padding:.3rem .42rem}
}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  padding:.55rem .72rem;border-radius:var(--radius);white-space:nowrap;
  font-size:.95rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  transition:background .15s,color .15s;
}
.nav a:hover{background:var(--navy-50);color:var(--navy-900)}
/* `:not(.btn)` est indispensable : sur contact.html, le bouton d'appel à
   l'action pointe vers la page courante et reçoit donc aria-current. Sans
   cette exclusion, il hérite du fond bleu pâle sous son texte blanc et
   devient illisible. L'attribut reste posé : il sert aux lecteurs d'écran,
   c'est seulement son habillage visuel qu'on écarte ici. */
.nav a[aria-current="page"]:not(.btn){color:var(--navy-900);background:var(--navy-100)}

/* `.nav a` est plus spécifique que `.btn--accent` : sans ces règles, le
   bouton d'appel à l'action hérite de la couleur de texte des liens et
   devient illisible sur son fond bleu. */
.nav a.btn--accent{color:var(--white)}
.nav a.btn--accent:hover{background:var(--accent-dark);color:var(--white)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:.55rem .7rem;cursor:pointer;color:var(--navy-900);font-size:1.15rem;line-height:1;
}

/* Bascule en menu déroulant à 1240 px. Le seuil était à 1180, il a dû monter
   quand le bloc d'identité est passé de « Assurance de personnes » à
   « Assurance de personnes · Épargne ». Le bloc a gagné 69 px et la barre
   horizontale débordait alors de 21 px à 1181 px. Mesure faite au navigateur,
   il faut 1219 px pour que tout tienne, 1240 laisse une marge. */
@media (max-width:1240px){
  .site-header .wrap{
    display:grid;
    grid-template-columns:auto auto auto 1fr auto auto;
    grid-template-rows:74px auto;
    align-items:center;
    column-gap:clamp(.5rem,1.2vw,1.5rem);
    row-gap:0;
  }
  .brand{grid-column:1;grid-row:1}
  .brand-ia{grid-column:2;grid-row:1}
  .lang{grid-column:3;grid-row:1;margin-right:0}
  .tel-mobile{grid-column:5;grid-row:1;justify-self:end;order:initial}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    grid-column:6;grid-row:1;justify-self:end;order:initial;
    width:44px;height:40px;padding:0;
  }
  .nav{
    grid-column:1 / -1;grid-row:2;width:100%;
    flex-direction:column;align-items:stretch;
    gap:.15rem;padding:.25rem 0 1rem;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.8rem 1rem}
  .nav .btn{margin-top:.5rem;text-align:center}
}




/* ---------- Sous-menus du menu principal ---------- */
.nav-group{
  position:relative;
  display:flex;
  align-items:center;
}
.nav-group__head{
  display:flex;
  align-items:center;
}
.nav-group__link{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.nav-group__link::after{
  content:"";
  width:.42rem;
  height:.42rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  opacity:.62;
}
.nav-submenu-toggle{
  display:none;
}
.nav-submenu{
  position:absolute;
  top:calc(100% + .35rem);
  left:0;
  min-width:15.5rem;
  display:grid;
  gap:.1rem;
  padding:.45rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:60;
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-submenu a{
  display:block;
  padding:.62rem .75rem;
  font-size:.92rem;
  white-space:nowrap;
}
.nav-group:has(.nav-submenu a[aria-current="page"]) .nav-group__link{
  color:var(--navy-900);
  background:var(--navy-100);
}

@media (max-width:1240px){
  .nav-group{
    display:block;
  }
  .nav-group__head{
    display:flex;
    align-items:stretch;
    gap:.25rem;
  }
  .nav-group__link{
    flex:1 1 auto;
    justify-content:space-between;
  }
  .nav-group__link::after{
    display:none;
  }
  .nav-submenu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 3rem;
    min-height:2.75rem;
    border:0;
    border-radius:var(--radius);
    background:transparent;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .nav-submenu-toggle:hover,
  .nav-submenu-toggle:focus-visible{
    background:var(--navy-50);
    color:var(--navy-900);
    outline:none;
  }
  .nav-submenu-toggle svg{
    width:1.05rem;
    height:1.05rem;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .16s ease;
  }
  .nav-group.is-expanded .nav-submenu-toggle svg{
    transform:rotate(180deg);
  }
  .nav-submenu{
    position:static;
    min-width:0;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    padding:.05rem 0 .25rem .65rem;
    margin:0 0 .25rem .75rem;
    border:0;
    border-left:2px solid var(--line);
    border-radius:0;
    box-shadow:none;
    background:transparent;
  }
  .nav-group.is-expanded .nav-submenu{
    display:grid;
  }
  .nav-submenu a{
    padding:.58rem .85rem;
    font-size:.94rem;
  }
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;padding:.85rem 1.6rem;border-radius:var(--radius);
  font-size:.97rem;font-weight:700;text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:transform .12s,box-shadow .15s,background .15s;
  font-family:var(--font);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--navy-800);color:var(--white);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--navy-900);color:var(--white);box-shadow:var(--shadow)}
.btn--accent{background:var(--accent);color:var(--white);box-shadow:var(--shadow-sm)}
.btn--accent:hover{background:var(--accent-dark);color:var(--white)}
.btn--ghost{border-color:var(--line);color:var(--ia-blue);background:var(--white)}
.btn--ghost:hover{border-color:var(--ia-blue);color:var(--ia-blue-bright)}
.btn--light{background:var(--white);color:var(--ia-navy)}
.btn--light:hover{background:var(--ia-tint);color:var(--ia-navy)}

/* Sur fond bleu, le bouton d'accent bleu disparaîtrait : il devient blanc.
   Aucun changement de HTML requis : c'est toujours .btn--accent. */
.hero .btn--accent,
.cta .btn--accent,
.section--navy .btn--accent{background:var(--white);color:var(--ia-blue);box-shadow:var(--shadow)}
.hero .btn--accent:hover,
.cta .btn--accent:hover,
.section--navy .btn--accent:hover{background:var(--ia-tint);color:var(--ia-navy)}
/* Bouton portant un pictogramme. Le chevron pivote quand le bloc qu'il
   commande est déplié : l'état est donc lisible sans avoir à relire le
   libellé. */
.btn--icone{display:inline-flex;align-items:center;gap:.6rem;vertical-align:middle}
.btn__chevron{
  width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s;
}
[aria-expanded="true"] .btn__chevron{transform:rotate(180deg)}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}

/* `text-align:center` n'agit pas sur les enfants d'une boîte flex : sans
   `justify-content`, les boutons se collent au bord gauche d'une colonne
   pourtant centrée. Il faut donc le déclarer partout où le bloc est centré. */
.center .btn-row,
.cta .btn-row{justify-content:center}

/* ---------- Héros ---------- */
.hero{
  background:linear-gradient(160deg,var(--ia-navy) 0%,var(--ia-blue) 100%);
  color:#d5e0ee;padding-block:clamp(3.5rem,9vw,6.5rem);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-12%;top:-25%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(115,196,239,.20),transparent 68%);pointer-events:none;
}
/* Le titre porte son propre saut de ligne. Pas de `text-wrap:balance` ici,
   il redistribue les mots et defait la coupure voulue, ni de limite en ch,
   qui ajouterait des retours. La taille est reduite d'un cran pour que les
   deux lignes tiennent dans la colonne. */
.hero h1{color:var(--white);max-width:none;font-size:clamp(1.85rem,3.9vw,2.5rem)}
.hero .lede{color:#c8dcf0;font-size:1.2rem;max-width:56ch}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--gap);align-items:center;position:relative;z-index:1}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr}}

.hero__card{
  background:var(--white);border-radius:var(--radius-lg);padding:1.9rem;
  box-shadow:var(--shadow-lg);color:var(--ink);
}
.hero__card h2{font-size:1.3rem;margin-bottom:.6rem}
.hero__card ul{margin:0;padding-left:1.15rem;color:var(--ink-soft);font-size:.97rem}
.hero__card li{margin-bottom:.6rem}
.hero__card li:last-child{margin-bottom:0}

/* Carte des jalons. Une variante seulement : `.hero__card` sert aussi de
   encadré latéral sur d'autres pages, où sa gouttière interne est nécessaire.
   Ici la gouttière passe aux enfants pour que le bandeau de titre et les
   filets aillent d'un bord à l'autre. */
.hero__card--jalons{padding:0;overflow:hidden}
.hero__card--jalons > h2{
  margin:0;padding:.9rem 1.5rem;
  background:var(--ia-tint);color:var(--ia-navy);
  font-size:1.05rem;letter-spacing:-.2px;
}

/* Étiquette et phrase plutôt qu'une puce, qui volait de la largeur à un texte
   déjà en colonne étroite. Les filets remplacent l'espacement : ils marquent
   les quatre entrées sans ajouter d'icône, la page en compte assez. */
/* Selecteur porte a (0,2,0) : `.hero__card ul` impose sinon son retrait de
   puce, qui decalait les filets de 18 px et cassait leur alignement. */
.hero__card--jalons .jalons{list-style:none;margin:0;padding:0}
.hero__card--jalons .jalons{font-size:.93rem}
.hero__card--jalons .jalons li{padding:.8rem 1.5rem;line-height:1.48;margin:0;position:relative}

/* Filet en pseudo-element plutot qu'en bordure : la bordure d'un <li> va
   forcement d'un bord a l'autre, alors qu'ici il doit s'aligner sur le texte
   et rester discret. Deux fois plus clair que `--line`. */
.hero__card--jalons .jalons li + li::before{
  content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;
  height:1px;background:rgba(1,35,63,.09);
}
.hero__card--jalons .jalons strong{display:block;color:var(--navy-900);font-size:.95rem;margin-bottom:.1rem}

.hero--photo{
  min-height:clamp(520px,68vh,690px);
  padding-block:clamp(2.8rem,6vw,4.6rem);
  display:grid;align-items:center;
  background:var(--ia-navy);
  isolation:isolate;
}
.hero--photo::before{
  content:"";position:absolute;inset:0;
  background:url("../images/generated/liberte-hero-lac-estrie.webp?v=official-ia-20260914") 28% 60% / cover no-repeat;
  transform:scaleX(-1);
  z-index:0;
}
.hero--photo::after{
  content:"";display:block;position:absolute;inset:0;
  width:auto;aspect-ratio:auto;
  background:linear-gradient(90deg,rgba(1,35,63,.94) 0%,rgba(1,35,63,.84) 34%,rgba(1,35,63,.34) 64%,rgba(1,35,63,.05) 100%);
  pointer-events:none;z-index:0;
}
.hero--photo .hero__grid{
  grid-template-columns:minmax(0,.92fr) minmax(360px,.7fr);
  grid-template-areas:
    "copy ."
    "card .";
  row-gap:1.15rem;
}
.hero--photo .hero__grid > div:first-child{grid-area:copy;max-width:760px}
.hero--photo .hero__card{
  grid-area:card;
  justify-self:start;
  max-width:min(760px,100%);
  width:100%;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);
}
.hero--photo .hero__card--jalons > h2{padding:.72rem 1.2rem}
.hero--photo .hero__card--jalons .jalons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  font-size:.82rem;
}
.hero--photo .hero__card--jalons .jalons li{
  padding:.85rem 1rem .95rem;
  line-height:1.38;
}
.hero--photo .hero__card--jalons .jalons li + li::before{
  left:0;right:auto;top:.85rem;bottom:.85rem;
  width:1px;height:auto;
}
.hero--photo .hero__card--jalons .jalons strong{font-size:.88rem}
@media (max-width:860px){
  .hero--photo .hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:none;
  }
  .hero--photo .hero__grid > div:first-child{grid-area:auto}
  .hero--photo .hero__card{grid-area:auto}
  .hero--photo .hero__card--jalons .jalons{
    display:block;
    font-size:.93rem;
  }
  .hero--photo .hero__card--jalons .jalons li{padding:.8rem 1.5rem;line-height:1.48}
  .hero--photo .hero__card--jalons .jalons li + li::before{
    top:0;left:1.5rem;right:1.5rem;bottom:auto;width:auto;height:1px;
  }
  .hero--photo .hero__card--jalons .jalons strong{font-size:.95rem}
  .hero--photo{min-height:auto}
  .hero--photo::before{background-position:28% center}
  .hero--photo::after{background:linear-gradient(180deg,rgba(1,35,63,.90),rgba(1,35,63,.78))}
}

/* ---------- Bannière des pages internes ----------
   Le même dégradé que le héros de l'accueil, moins haut, pour que chaque page
   commence sur un appui visuel plutôt que sur un aplat gris. */
.banniere{
  background:linear-gradient(160deg,var(--ia-navy) 0%,var(--ia-blue) 100%);
  color:#d5e0ee;padding-block:clamp(3rem,7vw,5rem);
  position:relative;overflow:hidden;
}
.banniere::after{
  content:"";position:absolute;right:-8%;top:-45%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(115,196,239,.20),transparent 68%);pointer-events:none;
}
.banniere > .wrap{position:relative;z-index:1}
.banniere h1{color:var(--white);max-width:22ch;text-wrap:balance}
.banniere .lede{color:#c8dcf0;font-size:1.15rem}

.banniere--photo{
  min-height:clamp(360px,48vw,520px);
  display:grid;align-items:end;
  background:
    linear-gradient(90deg,rgba(1,35,63,.93) 0%,rgba(1,35,63,.82) 34%,rgba(1,35,63,.46) 63%,rgba(1,35,63,.18) 100%),
    var(--banniere-image);
  background-size:cover;
  background-position:var(--banniere-position,center);
  background-repeat:no-repeat;
}
.banniere--photo::after{display:none}
.banniere--photo h1{max-width:18ch}
.banniere--photo .lede{max-width:57ch}
.banniere--assurances{
  --banniere-image:url("../images/generated/protection-famille-lac.webp?v=official-ia-20260914");
  --banniere-position:center 44%;
}
.banniere--mra{
  --banniere-image:url("../images/generated/amis-marche-lac-estrie.webp?v=official-ia-20260914");
  --banniere-position:center 48%;
}
.banniere--epargne{
  --banniere-image:url("../images/generated/epargne-projets-kayak.webp?v=official-ia-20260914");
  --banniere-position:center 50%;
}

.banniere--celi{
  --banniere-image:url("../images/generated/epargne-projets-kayak.webp?v=savings-photos-20260915");
  --banniere-position:center 52%;
}
.banniere--celiapp{
  --banniere-image:url("../images/generated/liberte-hero-lac-estrie.webp?v=savings-photos-20260915");
  --banniere-position:center 58%;
}
.banniere--reer{
  --banniere-image:url("../images/generated/retraite-liberte-montagne.webp?v=savings-photos-20260915");
  --banniere-position:center 45%;
}
.banniere--reee{
  --banniere-image:url("../images/generated/protection-famille-lac.webp?v=savings-photos-20260915");
  --banniere-position:center 42%;
}

.banniere--contact{
  --banniere-image:url("../images/generated/rencontre-cafe-neutre.webp?v=official-ia-20260914");
  --banniere-position:center 48%;
}
.banniere--ressources{
  --banniere-image:url("../images/generated/approche-analyse-bureau.webp?v=official-ia-20260914");
  --banniere-position:center 40%;
}
@media (max-width:760px){
  .banniere--photo{
    min-height:auto;
    background:
      linear-gradient(180deg,rgba(1,35,63,.93),rgba(1,35,63,.82)),
      var(--banniere-image);
    background-size:cover;
    background-position:center;
  }
}

/* ---------- Moments visuels ----------
   Les photos ne sont pas des vignettes décoratives : elles portent le
   bénéfice concret des protections, soit la liberté, les projets et les gens. */
.experience-band{
  /* La bande est bien plus large que haute, alors qu'une photo en 4:3 est
     presque carree. Plus l'ecran s'elargit, plus la tranche visible se
     reduit : a 1900 px, un cadrage centre ne montrait plus que 39 % de la
     hauteur de l'image et coupait le haut des tetes.
     Deux reglages repondent a ca. Le plafond de hauteur monte a 640 px pour
     que la tranche reste respirable sur un grand ecran, et le cadrage se
     decale vers le haut de l'image, ou se trouvent les visages, plutot que
     de rester au milieu, ou il n'y a que des torses. */
  min-height:clamp(410px,46vw,640px);
  display:grid;align-items:end;position:relative;overflow:hidden;
  padding-block:clamp(3.5rem,8vw,5.5rem);
  color:var(--white);
  background:
    linear-gradient(0deg,rgba(1,35,63,.88),rgba(1,35,63,.22) 56%,rgba(1,35,63,.10)),
    linear-gradient(90deg,rgba(1,35,63,.88),rgba(1,35,63,.42) 48%,rgba(1,35,63,.10)),
    url("../images/generated/amis-lac-estrie.webp?v=official-ia-20260914") center 34% / cover no-repeat;
}
.experience-band h2{color:var(--white);max-width:18ch}
.experience-band .eyebrow{color:var(--ia-sky)}
.experience-band__copy{max-width:54ch}
.experience-band p:not(.eyebrow){color:#d5e0ee;font-size:1.08rem}

.visual-split{overflow:hidden}
.visual-split__grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:var(--gap);align-items:center;
}
.visual-split__grid--flip{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.visual-split__copy{max-width:70ch}
.section--navy .visual-split__copy p{color:#c8dcf0}
.visual-split__media{
  min-height:clamp(340px,42vw,500px);
  background-image:var(--visual-image);
  background-size:cover;
  background-position:var(--visual-position,center);
  box-shadow:var(--shadow);
}
.visual-split__media--left{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.visual-split__media--right{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
@media (min-width:1181px){
  /* La photo doit toucher le bord de la page. La moitie de l'espace restant
     ne suffit pas : --wrap compte les deux gouttieres de 2rem, et 100vw
     compte la barre de defilement que la page n'occupe pas. On retire donc
     la gouttiere en plus, ce qui vise juste sans barre de defilement et
     deborde de quelques pixels avec, deborde que le overflow:hidden de la
     section rogne proprement. */
  .visual-split__media--left{margin-left:calc((100vw - var(--wrap)) / -2 - 2rem)}
  .visual-split__media--right{margin-right:calc((100vw - var(--wrap)) / -2 - 2rem)}
}
.visual-split--retraite{
  --visual-image:url("../images/generated/retraite-liberte-montagne.webp?v=official-ia-20260914");
  --visual-position:center;
}
.visual-split--accompagnement{
  --visual-image:url("../images/generated/amis-marche-lac-estrie.webp?v=official-ia-20260914");
  --visual-position:center;
}
.visual-split--conseil{
  --visual-image:url("../images/generated/accompagnement-cafe-conseil.webp?v=official-ia-20260914");
  --visual-position:center 42%;
}
@media (max-width:860px){
  .experience-band{min-height:360px;background-position:center}
  .visual-split__grid,
  .visual-split__grid--flip{grid-template-columns:1fr}
  .visual-split__media{
    order:-1;min-height:320px;
    margin-inline:calc(clamp(1.1rem,4vw,2rem) * -1);
    border-radius:0;
  }
}

/* Rail de raccourcis, utile sur les pages qui dépassent les cinq écrans. */
.ancres{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.9rem}
.ancres a{
  padding:.5rem 1rem;border-radius:999px;text-decoration:none;
  border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.08);
  color:var(--white);font-size:.92rem;font-weight:600;
  transition:background .18s,border-color .18s;
}
.ancres a:hover,.ancres a:focus-visible{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}

/* ---------- Bandeau de confiance ---------- */
.trust{border-bottom:1px solid var(--line);background:var(--white)}

/* Quatre colonnes fixes plutôt qu'un `auto-fit` : les filets de séparation
   n'ont de sens que si l'on sait où commence chaque rangée. */
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-block:3rem}

/* Icône au-dessus du texte, et non à sa gauche : la colonne fait 215 px, une
   icône de 38 px plus sa gouttière en mangeait le tiers, ce qui poussait
   chaque bloc à quatre ou cinq lignes. */
.trust__item{padding-inline:1.7rem;border-left:1px solid var(--line)}
.trust__item:first-child{padding-left:0;border-left:0}
.trust__item:last-child{padding-right:0}

/* Pas d'icone ici : la page en compte deja assez. Un filet d'accent court
   marque le depart de chaque colonne, ce qui suffit a donner le rythme. */
.trust__item::before{
  content:"";display:block;width:30px;height:3px;border-radius:2px;
  background:var(--ia-blue);margin-bottom:1.1rem;
}
.trust__item strong{display:block;font-size:1rem;color:var(--navy-900);margin-bottom:.4rem}
.trust__item span{display:block;font-size:.9rem;color:var(--ink-faint);line-height:1.5}

@media (max-width:900px){
  .trust__grid{grid-template-columns:repeat(2,1fr);row-gap:2.2rem}
  .trust__item:nth-child(odd){padding-left:0;border-left:0}
  .trust__item:nth-child(even){padding-right:0}
}
@media (max-width:560px){
  .trust__grid{grid-template-columns:1fr;row-gap:1.9rem}
  .trust__item{padding-inline:0;border-left:0}
}

/* ---------- Section en attente de contenu ----------
   Un cadre pointillé plutôt qu'un vide muet. Il occupe la place que prendront
   les articles, et il annonce l'état de la page au lieu de le taire. */
.a-venir{
  text-align:center;padding:3rem 2rem;
  border:2px dashed var(--grey-200);border-radius:var(--radius-lg);
  background:var(--navy-50);
}
.a-venir h2{font-size:1.45rem;margin-bottom:.6rem}
.a-venir p{color:var(--ink-soft);max-width:52ch;margin:0 auto;text-align:center}
@media (max-width:620px){.a-venir{padding:2.2rem 1.3rem}}

/* ---------- Carrousel de visuels ----------
   Defilement natif plutot qu'un moteur en JavaScript : la piste est une boite
   a defilement horizontal avec accrochage. Sans JavaScript, on fait defiler au
   doigt ou a la molette et rien n'est perdu, les fleches et les points ne sont
   qu'un confort ajoute par-dessus. */
.carrousel{position:relative;margin:2.5rem auto 0;max-width:420px}
.carrousel__piste{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;border-radius:var(--radius-lg);
  scrollbar-width:none;
}
.carrousel__piste::-webkit-scrollbar{display:none}
/* Les visuels n'ont pas tous le meme rapport de forme : les vues d'une piste
   en flex s'etirent a la hauteur de la plus haute, et une image plus large
   laissait 246 px de vide sous elle. Centrer verticalement repartit l'ecart
   de part et d'autre, ce qui se lit comme une marge et non comme un trou. */
.carrousel__vue{
  flex:0 0 100%;scroll-snap-align:center;margin:0;
  display:flex;flex-direction:column;justify-content:center;
}
.carrousel__vue img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
}

/* Fleches et points masques par defaut : sans JavaScript ils ne feraient
   rien. Le script ajoute `.carrousel--actif` pour les reveler. */
.carrousel__fleche,
.carrousel__points{display:none}
.carrousel--actif .carrousel__points{display:flex}
.carrousel--actif .carrousel__fleche{display:grid}
.carrousel__fleche:disabled{opacity:.35;cursor:default}

.carrousel__fleche{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.92);color:var(--navy-900);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow);transition:background .18s,border-color .18s;
}
.carrousel__fleche:hover{background:var(--white);border-color:var(--ia-blue);color:var(--ia-blue)}
.carrousel__fleche--avant{left:-14px}
.carrousel__fleche--apres{right:-14px}
.carrousel__fleche svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* Dates sous chaque visuel. Les vues d'un carrousel en flex s'etirent a la
   hauteur de la plus haute, donc une vue a deux periodes et une vue a une
   seule gardent la meme hauteur et rien ne saute au defilement. */
.carrousel__dates{
  display:flex;flex-direction:column;gap:.7rem;
  margin-top:.9rem;font-size:.86rem;line-height:1.45;color:var(--ink-soft);
}
.carrousel__date{display:block}
.carrousel__date strong{
  display:block;color:var(--navy-900);font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.1rem;
}

.carrousel__points{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.carrousel__points button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--grey-300);background:transparent;
  transition:background .18s,border-color .18s;
}
.carrousel__points button[aria-selected="true"]{background:var(--ia-blue);border-color:var(--ia-blue)}


/* Les fleches deborderaient du cadre sur un petit ecran. */
@media (max-width:560px){
  .carrousel__fleche--avant{left:6px}
  .carrousel__fleche--apres{right:6px}
}

/* ---------- Grilles de cartes ---------- */
.grid{display:grid;gap:1.5rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid--paire{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.grid--paire{grid-template-columns:1fr}}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.8rem;transition:box-shadow .18s,transform .18s,border-color .18s;
  display:flex;flex-direction:column;
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--navy-100)}
.card__icon{
  width:46px;height:46px;border-radius:12px;background:var(--navy-50);
  display:grid;place-items:center;margin-bottom:1.1rem;font-size:1.4rem;
}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.96rem;flex-grow:1}
.card__link{
  margin-top:1.1rem;font-size:.92rem;font-weight:700;text-decoration:none;
  color:var(--ia-blue);align-self:flex-start;
}
.card__link:hover{color:var(--ia-blue-bright)}
.card__link::after{content:" \2192"}

/* ---------- Étapes ---------- */
/* ---------- Étapes de la démarche ----------
   Cartes de largeur égale sur une seule ligne. On utilise un flux en
   colonnes plutôt qu'un nombre fixe de colonnes, ainsi la même règle sert
   aux 4 étapes de l'accueil comme aux 3 de la page Concours. */
.steps{
  display:grid;gap:1.25rem;
  grid-auto-flow:column;grid-auto-columns:1fr;
}
.step{
  position:relative;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg);
  padding:1.6rem 1.35rem;
}
.step__icone{
  width:46px;height:46px;border-radius:12px;flex:0 0 auto;
  background:var(--ia-blue-bright);color:var(--white);
  display:grid;place-items:center;margin-bottom:1.05rem;
}
.step__icone svg{
  width:23px;height:23px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.step__num{
  display:block;margin-bottom:.3rem;
  font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ia-sky);
}
.step h3{margin-bottom:.45rem}
.step p{color:var(--ink-soft);font-size:.94rem}
.section--navy .step p{color:#a8c4de}
.section--navy .mra-boundary,.section--navy .mra-referral-note{
  max-width:72ch;margin:2rem auto 0;color:#c8dcf0;text-align:center
}
.section--navy .mra-referral-note a{color:var(--ia-sky)}
.section--navy .mra-referral-note a:hover{color:var(--white)}
.mra-referral-actions{justify-content:center;margin-top:1.1rem}

/* Fil conducteur entre les étapes. Il vit dans la gouttière, à la hauteur
   du centre des pictogrammes, et disparaît dès que les cartes passent sur
   plusieurs rangées : il n'indiquerait plus rien. */
.step:not(:last-child)::after{
  content:"";position:absolute;
  top:calc(1.6rem + 23px);left:100%;width:1.25rem;height:1px;
  background:rgba(255,255,255,.2);
}

@media (max-width:1000px){
  .steps{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
  .step:not(:last-child)::after{display:none}
}
@media (max-width:620px){
  .steps{grid-template-columns:1fr}
}

/* ---------- Bloc portrait / à propos ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap);align-items:center}
.split--flip{grid-template-columns:1.15fr .85fr}
@media (max-width:860px){.split,.split--flip{grid-template-columns:1fr}}
/* La carte laterale se cale en haut de sa colonne et n'en bouge plus. */
@media (min-width:861px){.split--haut{align-items:start}}
/* En colonne unique, elle passe toujours apres le texte qu'elle appuie. */
@media (max-width:860px){.split--haut > .hero__card{order:2}}

.portrait{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-100);
  aspect-ratio:4/5;box-shadow:var(--shadow);
}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait--placeholder{
  display:grid;place-items:center;text-align:center;padding:2rem;
  color:var(--grey-600);font-size:.88rem;border:2px dashed var(--ia-grey);
}

/* ---------- Détails / FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:1.15rem 0}
.faq summary{
  cursor:pointer;font-weight:700;color:var(--navy-900);font-size:1.03rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--ia-blue-bright);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:.85rem;color:var(--ink-soft);font-size:.97rem;max-width:75ch}

/* ---------- Formulaire ---------- */
.form-shell{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-sm);
}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:.9rem;font-weight:700;color:var(--navy-900);margin-bottom:.4rem}
.field .hint{font-weight:400;color:var(--ink-faint);font-size:.85rem}
/* Note sous un champ : sert à justifier une demande qui pourrait rebuter,
   comme un numéro de téléphone obligatoire. */
.field p.hint{margin:.45rem 0 0;line-height:1.45}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem .9rem;font-size:1rem;font-family:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ia-blue-bright);box-shadow:0 0 0 3px rgba(6,77,217,.16);
}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* ---------- Groupes de choix (cases et boutons radio) ----------
   `fieldset` + `legend` plutôt que des paragraphes : c'est ce qui permet à
   un lecteur d'écran d'annoncer la question avant d'énumérer les options. */
.groupe{border:0;padding:0;margin:0 0 1.7rem;min-width:0}
.groupe legend{
  font-size:.9rem;font-weight:700;color:var(--navy-900);
  margin-bottom:.65rem;padding:0;line-height:1.35;
}
.groupe .hint{display:block;font-weight:400;color:var(--ink-faint);font-size:.85rem;margin-top:.2rem}

.choix{display:grid;gap:.5rem}
.choix--large{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.choix label{
  display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;
  font-size:.94rem;color:var(--ink-soft);line-height:1.4;
  background:var(--grey-50);border:1px solid var(--line);
  border-radius:var(--radius);padding:.65rem .8rem;
  transition:border-color .15s,background .15s,color .15s;
}
.choix label:hover{border-color:var(--ia-blue);background:var(--white)}
.choix input{margin:.15rem 0 0;flex:0 0 auto;width:auto;accent-color:var(--ia-blue)}
.choix input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.choix input:checked + span{color:var(--ia-navy);font-weight:600}

/* ---------- Bandeau de concours ---------- */
.bandeau{
  border:1px solid var(--line);border-left:4px solid var(--ia-grey);
  background:var(--grey-50);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:1.5rem 1.7rem;
}
.bandeau--actif{border-left-color:var(--ia-blue-bright);background:var(--ia-tint)}
.bandeau h2{font-size:1.25rem;margin-bottom:.5rem}
.bandeau p{color:var(--ink-soft);font-size:.97rem}

.concours-referencement{padding-block:clamp(2.5rem,6vw,5rem)}
.concours-referencement__grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,4.5vw,4rem);
  align-items:center;
}
.concours-referencement__visuel{margin:0;min-width:0}
.concours-referencement__visuel a{display:block}
.concours-referencement__visuel img{
  width:100%;
  max-width:540px;
  aspect-ratio:1;
  object-fit:contain;
}
.concours-referencement__texte{min-width:0;max-width:55ch}
.concours-referencement__texte h2{font-size:2.2rem;max-width:22ch}
.concours-referencement__texte > p{font-size:1.03rem;line-height:1.65}
.concours-referencement__prix{
  padding-block:1rem;
  border-block:1px solid var(--line);
}
.concours-referencement__prix strong{
  display:block;
  color:var(--ia-navy);
  font-size:1.1rem;
}
.concours-referencement__texte .concours-referencement__precision{
  margin-top:.85rem;
  color:var(--ink-soft);
  font-size:.88rem;
}
@media (max-width:800px){
  .concours-referencement__grid{grid-template-columns:1fr}
  .concours-referencement__visuel img{margin-inline:auto}
  .concours-referencement__texte{max-width:none}
  .concours-referencement__texte h2{font-size:1.8rem}
}

.concours-visuel{margin:1.5rem 0 2.6rem}
.concours-visuel img{
  width:min(100%,560px);
  margin-inline:auto;
  border-radius:8px;
  box-shadow:var(--shadow);
  background:var(--white);
}
.concours-visuel figcaption{
  max-width:560px;
  margin:.75rem auto 0;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.45;
  text-align:center;
}

.consent{display:flex;gap:.7rem;align-items:flex-start;background:var(--navy-50);padding:1rem;border-radius:var(--radius);margin-bottom:1.3rem}
.consent input{width:auto;margin-top:.25rem;flex:0 0 auto}
.consent label{font-weight:400;font-size:.88rem;color:var(--ink-soft);line-height:1.5;margin:0}

/* ---------- Carte ----------
   L'iframe de Google Maps arrive avec une taille fixe de 600 x 450 :
   on la force à suivre la largeur de sa colonne, sinon elle déborde
   sur mobile. `line-height:0` évite le liseré sous l'iframe. */
.carte{
  margin-top:2rem;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);line-height:0;box-shadow:var(--shadow-sm);
}
.carte iframe{width:100%;height:330px;border:0;display:block}
/* En attente d'un clic, la zone porte du texte et non plus une image. Il faut
   donc lui rendre l'interligne que la regle .carte avait mis a zero pour
   coller l'iframe a ses bords. */
.carte--attente{
  line-height:1.6;background:var(--ia-cream);
  padding:1.35rem 1.5rem;
}
.carte__avis{font-size:.9rem;color:#5b4415;margin:0}
.carte__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:1.1rem 0 0;
}
.carte__lien{font-size:.9rem}
@media (max-width:560px){ .carte iframe{height:260px} }

/* ---------- Encadré d'avertissement ---------- */
.notice{
  border-left:4px solid var(--ia-orange);background:var(--ia-cream);
  padding:1.15rem 1.35rem;border-radius:0 var(--radius) var(--radius) 0;
  font-size:.93rem;color:#5b4415;
}
.notice strong{color:#3d2c08}

/* ---------- Appel à l'action final ---------- */
.cta{background:linear-gradient(160deg,var(--ia-blue),var(--ia-navy));color:#c8dcf0;text-align:center}
.cta h2{color:var(--white)}
.cta .lede{color:#bdd4ea;margin-inline:auto}

/* ---------- Coordonnées ---------- */
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.3rem}
.contact-list .ico{
  flex:0 0 auto;width:36px;height:36px;border-radius:9px;background:var(--navy-50);
  display:grid;place-items:center;font-size:1.05rem;
}
.contact-list strong{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
/* Trois énoncés distincts sous « Heures ». Sans étiquette ni respiration
   ils se lisaient comme un seul paragraphe, et rien ne disait lequel
   décrivait le bureau plutôt que la disponibilité. */
.horaire{display:block;margin-top:.7rem;line-height:1.45}
.horaire:first-of-type{margin-top:.35rem}
.horaire__quoi{
  display:block;font-size:.82rem;font-weight:700;color:var(--navy-900);
  margin-bottom:.05rem;
}

.contact-list a{font-weight:600;text-decoration:none}
.contact-list a:hover{text-decoration:underline}

/* ---------- Bandeau de consentement ----------
   Ancre en bas de l'ecran plutot qu'en superposition centrale : la lecture du
   site reste possible pendant que la personne decide, ce qui evite de la
   forcer a cliquer pour acceder au contenu. */
.consentement{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;
  padding:1.1rem clamp(1.1rem,4vw,2rem);
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -6px 30px rgba(11,31,56,.13);
}
.consentement__texte{
  flex:1 1 30rem;font-size:.9rem;line-height:1.5;color:var(--ink-soft);
}
.consentement__texte strong{color:var(--navy-900)}
.consentement__boutons{display:flex;gap:.7rem;flex:0 0 auto;margin-left:auto}
.consentement .btn{padding:.6rem 1.2rem;font-size:.92rem}

@media (max-width:620px){
  .consentement{gap:.9rem}
  .consentement__boutons{margin-left:0;width:100%}
  .consentement__boutons .btn{flex:1 1 0}
}

/* ---------- Pied de page ---------- */
/* Texte du pied de page en --grey-300 et non en --ia-grey : le gris de
   marque n'atteint que 4,4:1 sur le marine, sous le seuil AA de 4,5 pour
   du texte de 14 px. Même famille de teinte, deux crans plus clair. */
.site-footer{background:var(--ia-navy);color:var(--grey-300);font-size:.9rem;padding-block:3rem 2rem}
.site-footer a{color:var(--ia-tint);text-decoration:none}
.site-footer li{line-height:1.5}
.site-footer li + li{margin-top:.35rem}
.site-footer a:hover{color:var(--white);text-decoration:underline}

/* Le logo iA garde ses couleurs officielles : il est posé sur une pastille
   blanche plutôt que d'être altéré pour le fond marine. Si les normes
   graphiques d'iA fournissent une version renversée (blanche), la substituer
   et retirer le fond blanc ci-dessous. */
.footer__ia{
  display:inline-block;background:var(--white);
  padding:.7rem .9rem;border-radius:var(--radius);
  margin-top:1.2rem;line-height:0;
}
.footer__ia img{width:auto;height:36px;display:block}

.footer__socials{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.footer__socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.55rem;height:2.55rem;padding:.25rem;
  border:1px solid rgba(255,255,255,.20);border-radius:999px;
  background:rgba(255,255,255,.08);text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.footer__socials a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);text-decoration:none;transform:translateY(-1px)}
.footer__socials img{display:block;width:1.85rem;height:1.85rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.2rem}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr;gap:1.8rem}}
.footer__grid h4{color:var(--white);font-family:var(--font);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.footer__grid ul{list-style:none;margin:0;padding:0}
.footer__grid li{margin-bottom:.55rem}
.footer__nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.15rem;
  row-gap:.72rem;
  align-items:start;
}
.footer__nav > li{margin-bottom:0;min-width:0}
.footer__nav-group > a{color:var(--white);font-weight:700}
.footer__subnav{
  margin:.45rem 0 0 0;
  padding-left:0;
}
.footer__subnav li{margin-bottom:.28rem}
.footer__subnav li + li{margin-top:.18rem}
.footer__subnav a{color:#c9e3f6;font-size:.84rem;line-height:1.35}
@media (max-width:380px){
  .footer__nav{column-gap:.8rem}
  .footer__subnav{padding-left:0}
  .footer__subnav a{font-size:.82rem}
}
.footer__brand{font-family:var(--font-display);font-size:1.15rem;color:var(--white);margin-bottom:.5rem}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;font-size:.82rem;line-height:1.6;color:#9fb3c6}
.legal p{margin-bottom:.7rem}

/* ---------- Marqueur de contenu à remplir ---------- */
.todo{background:#fff3cd;color:#664d03;padding:0 .3em;border-radius:3px;font-weight:600}

@media print{.site-header,.site-footer,.btn-row,.nav-toggle{display:none}}