/* Accueil « d'un seul trait » (AFFEP). Généré depuis la maquette ; toutes les règles sont
   confinées à <main class="affep-accueil"> pour laisser intacts l'en-tête et le pied du site. */
body .affep-accueil h1, body .affep-accueil h2, body .affep-accueil h3, body .affep-accueil p, body .affep-accueil ul, body .affep-accueil figure { margin: 0; }
body .affep-accueil .bouton, body .affep-accueil .bouton:hover, body .affep-accueil .bouton:focus { text-decoration: none; }
body .affep-accueil {--papier: #ffffff;
  --fond-carte: #f1f6f7;
  --encre: #18303d;
  --encre-douce: #4d626d;
  --fil: #2d8496;
  --action: #167677;
  --action-survol: #0f5859;
  --gravure: #bcd0d5;
  --territoire: #ffffff;
  --territoire-allume: #dcebee;
  --territoire-survol: #c4dde2;
  --nuit: #0c2a3c;
  --sur-nuit: #c9dce2;
  --display: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  --texte: "Inter", "Helvetica Neue", Arial, sans-serif;
  --rail: 0px; 
  color-scheme: light;}
body .affep-accueil, body .affep-accueil * {box-sizing: border-box;}
body .affep-accueil {margin: 0; background: var(--papier); color: var(--encre); font: 400 18px/1.6 var(--texte);}
body .affep-accueil a {color: inherit;}
body .affep-accueil :focus-visible {outline: 3px solid var(--action); outline-offset: 3px; border-radius: 4px;}
body .affep-accueil .wrap {width: 100%; max-width: 1240px; margin: 0 auto;
  padding-left: max(calc(24px + var(--rail)), env(safe-area-inset-left, 0px));
  padding-right: max(calc(24px + var(--rail)), env(safe-area-inset-right, 0px));}
body .affep-accueil {position: relative;}
body .affep-accueil .fil {position: absolute; inset: 0 auto auto 0; pointer-events: none; z-index: 3; overflow: visible;}
body .affep-accueil .fil path {fill: none; stroke-linecap: round; stroke-linejoin: round;}
body .affep-accueil .tuiles {position: absolute; inset: 0 auto auto 0; width: 1px; pointer-events: none; visibility: hidden;}
body .affep-accueil .tuiles div {position: absolute; left: 0; width: 1px;}
body .affep-accueil > section {position: relative;}
body .affep-accueil > section > .wrap {position: relative; z-index: 2;}
body .affep-accueil .ouverture .wrap {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; padding-block: 72px 88px; align-items: end;}
body .affep-accueil .ouverture h1 {font: 700 clamp(40px, 5.6vw, 80px)/1.04 var(--display); letter-spacing: -0.035em; color: var(--nuit);
  margin: 0; text-wrap: balance; max-width: 100%;}
body .affep-accueil .ouverture h1 > span {display: block; width: fit-content; max-width: 100%; text-wrap: balance;}
body .affep-accueil .ouverture .titre-fibre {margin-top: 0.16em; color: var(--action);}
body .affep-accueil .ouverture .chapo {margin: 48px 0 0; max-width: 34ch; font-size: 20px; line-height: 1.55;}
body .affep-accueil .actions {display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px;}
body .affep-accueil .bouton {display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 8px;
  background: var(--action); color: #fff; text-decoration: none; font: 600 17px/1 var(--display);
  transition: background-color 150ms ease-out, transform 140ms ease-out;}
body .affep-accueil .bouton:hover {background: var(--action-survol);}
body .affep-accueil .bouton:active {transform: scale(0.98);}
body .affep-accueil .lien {font: 600 16px/1.3 var(--texte); color: var(--action); padding: 12px 0;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 150ms ease-out;}
body .affep-accueil .lien:hover {color: var(--action-survol);}
body .affep-accueil .cerveau {aspect-ratio: 290 / 223; width: 100%; max-width: 470px; justify-self: end; align-self: start; margin-top: 8px;}
body .affep-accueil .carte {background: var(--fond-carte);}
body .affep-accueil .carte .wrap {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: center; padding-block: 56px;}
body .affep-accueil .carte figure {width: min(440px, 100%); margin: 0 auto;}
body .affep-accueil .carte svg.france {display: block; width: 100%; height: auto; overflow: visible;}
body .affep-accueil .sub {fill: var(--territoire); stroke: var(--gravure); stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: fill 700ms ease-out, stroke 700ms ease-out;}
body .affep-accueil .sub.is-lit {fill: var(--territoire-allume); stroke: #93b6be;}
body .affep-accueil .sub.is-hover {fill: var(--territoire-survol); stroke: var(--fil);}
body .affep-accueil .carte-texte {min-width: 0;}
body .affep-accueil h2 {font: 700 clamp(30px, 3.4vw, 44px)/1.08 var(--display); letter-spacing: -0.025em; color: var(--nuit); margin: 0; text-wrap: balance;}
body .affep-accueil .carte-texte p {margin: 20px 0 0; max-width: 36ch;}
body .affep-accueil .index {list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 24px; font-size: 16px; line-height: 1.5;}
body .affep-accueil .index li {break-inside: avoid;}
body .affep-accueil .index a {display: flex; align-items: center; min-height: 44px; padding: 8px 0; text-decoration: none; color: var(--action);}
body .affep-accueil .index a:hover,
body .affep-accueil .index a.is-hover {color: var(--action); text-decoration: underline; text-underline-offset: 4px;}
body .affep-accueil .choix-subdivision {margin-top: 24px;}
body .affep-accueil .choix-subdivision label {display: block; margin-bottom: 8px; font: 600 16px/1.4 var(--texte);}
body .affep-accueil .choix-subdivision-actions {display: flex; gap: 12px; align-items: stretch;}
body .affep-accueil .choix-subdivision select {display: block; flex: 1; width: 100%; min-width: 0; min-height: 52px; margin: 0; padding: 10px 32px 10px 14px; border: 1px solid var(--action); border-radius: 8px; color: var(--encre); background-color: #fff; font: 400 16px/1.4 var(--texte);}
body .affep-accueil .choix-subdivision .bouton {flex-shrink: 0; border: 0; padding-inline: 20px; cursor: pointer;}
body .affep-accueil .liste-subdivisions {margin-top: 16px;}
body .affep-accueil summary {min-height: 44px; padding-block: 10px; cursor: pointer; font: 600 16px/1.5 var(--display); color: var(--action);}
body .affep-accueil .france a:hover .sub,
body .affep-accueil .france a:focus-visible .sub {fill: var(--territoire-survol); stroke: var(--action); stroke-width: 2.4;}
body .affep-accueil .etiquette {position: absolute; z-index: 4; pointer-events: none; padding: 6px 10px; border-radius: 4px;
  background: var(--nuit); color: #fff; font: 600 14px/1 var(--display); transform: translate(-50%, -140%); white-space: nowrap;}
body .affep-accueil .roles {overflow-x: clip;}
body .affep-accueil .roles .wrap {padding-block: 64px 72px;}
body .affep-accueil .roles h2 {margin-bottom: 56px;}
body .affep-accueil .liste-roles {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 80px;}
body .affep-accueil .role {position: relative; min-width: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) 156px; grid-template-rows: auto 1fr auto; column-gap: 24px; align-items: start;}
body .affep-accueil .role > :not(.signe) {grid-column: 1;}
body .affep-accueil .role h3 {grid-row: 1;}
body .affep-accueil .role p {grid-row: 2;}
body .affep-accueil .role .lien {grid-row: 3; justify-self: start;}
body .affep-accueil .signe {grid-column: 2; grid-row: 1 / 4; align-self: start; justify-self: end; width: 156px; aspect-ratio: 3 / 2; margin-top: 4px;}
body .affep-accueil .role h3 {font: 700 clamp(24px, 2.1vw, 28px)/1.18 var(--display); letter-spacing: -0.02em; color: var(--nuit); margin: 0; text-wrap: balance;}
body .affep-accueil .role h3 .num {color: var(--fil); font-variant-numeric: tabular-nums; margin-right: 0.15em;}
body .affep-accueil .role p {margin: 12px 0 0; max-width: 38ch; font: 400 17px/1.6 var(--texte); color: #24414f; text-wrap: pretty;}
body .affep-accueil .role .lien {display: inline-block; margin-top: 2px;}
/* Fin : même grille et mêmes bords que les missions. Le titre sur une ligne, puis les publics
   et le bouton sur une rangée ; rythme de 8 px. Aucun contenu daté (année, tarif). */
body .affep-accueil .fin {background: #eaf3f4; color: #24414f;}
body .affep-accueil .fin .wrap {display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 80px; row-gap: 24px; align-items: center; padding-block: 48px;}
body .affep-accueil .fin-intro {grid-column: 1 / -1;}
body .affep-accueil .fin h2 {font: 700 clamp(24px, 2.1vw, 28px)/1.18 var(--display); letter-spacing: -0.02em; color: var(--nuit); text-wrap: balance;}
body .affep-accueil .fin-publics {grid-column: 1;}
body .affep-accueil .publics-adhesion {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin: 0;}
body .affep-accueil .publics-adhesion dt {font: 600 16px/1.5 var(--texte); color: var(--nuit);}
body .affep-accueil .publics-adhesion dd {margin: 0; font: 400 15px/1.5 var(--texte); color: #4a6573; text-wrap: pretty;}
body .affep-accueil .fin-contenu {grid-column: 2; align-self: center; justify-self: end;}
body .affep-accueil .fin .actions {margin-top: 0;}
body .affep-accueil .fin .bouton {min-height: 0; padding: 18px 32px; border-radius: 999px; background: var(--action); color: #fff; font: 600 18px/1.2 var(--texte);}
body .affep-accueil .fin .bouton:hover {background: #115e5f;}
body .affep-accueil .fin .bouton:focus-visible {outline: 3px solid var(--fil); outline-offset: 3px; border-radius: 999px;}
@media (max-width: 1320px) {
body .affep-accueil {--rail: 20px;}
}
@media (max-width: 1024px) {
body .affep-accueil .ouverture .wrap {column-gap: 32px; padding-block: 56px 80px;}
body .affep-accueil .carte .wrap {column-gap: 40px;}
}
@media (min-width: 761px) and (max-width: 1100px) {
/* Tablette en paysage : comme sur ordinateur, l'illustration à droite du titre, jamais retournée. */
body .affep-accueil .liste-roles {column-gap: 56px;}
body .affep-accueil .role {grid-template-columns: minmax(0, 1fr) 144px; column-gap: 20px;}
body .affep-accueil .signe {width: 144px;}
}
@media (max-width: 1099px) {
body .affep-accueil .fin .wrap {column-gap: 56px;}
body .affep-accueil .publics-adhesion {column-gap: 24px;}
}
@media (max-width: 983px) {
/* trop étroit pour les publics et le bouton côte à côte : le bouton passe dessous, au bord droit */
body .affep-accueil .fin .wrap {grid-template-columns: minmax(0, 1fr);}
body .affep-accueil .fin-contenu {grid-column: 1; padding-top: 24px;}
}
/* Cellule trop étroite (< 420 px) pour le texte et l'illustration côte à côte : une seule colonne,
   sans illustrations ; le fil descend dans la marge gauche et souligne chaque titre. */
@media (max-width: 983px) {
body .affep-accueil .liste-roles {grid-template-columns: minmax(0, 1fr); row-gap: 48px;}
body .affep-accueil .role {grid-template-columns: minmax(0, 1fr);}
body .affep-accueil .signe {display: none;}
body .affep-accueil .role p {max-width: 62ch;}
}
@media (max-width: 760px) {
body .affep-accueil {--rail: 14px;}
body .affep-accueil {font-size: 17px;}
body .affep-accueil .ouverture .wrap {grid-template-columns: minmax(0, 1fr); padding-block: 16px 40px;}
body .affep-accueil .ouverture h1 {font-size: clamp(36px, 10.25vw, 40px);}
body .affep-accueil .ouverture .actions {margin-top: 20px;}
body .affep-accueil .cerveau {order: -1; justify-self: start; width: min(44%, 138px); margin: 0 0 30px;}
body .affep-accueil .ouverture .chapo {margin-top: 28px; font-size: 18px;}
body .affep-accueil .carte .wrap {grid-template-columns: minmax(0, 1fr); padding-block: 40px; row-gap: 24px;}
body .affep-accueil .carte-texte {order: -1;}
body .affep-accueil .carte figure {width: 240px; max-width: 100%;}
body .affep-accueil .carte-texte p {margin-top: 16px;}
body .affep-accueil .choix-subdivision {margin-top: 20px;}
body .affep-accueil .choix-subdivision-actions {gap: 8px;}
body .affep-accueil .choix-subdivision .bouton {padding-inline: 12px; font-size: 16px;}
body .affep-accueil .index {columns: 1;}
body .affep-accueil .roles .wrap {padding-block: 48px 56px;}
body .affep-accueil .roles h2 {margin-bottom: 40px;}
body .affep-accueil .liste-roles {grid-template-columns: minmax(0, 1fr); row-gap: 48px;}

body .affep-accueil .fin .wrap {row-gap: 16px; padding-block: 56px;}
body .affep-accueil .fin-contenu {justify-self: stretch; padding-top: 32px;}
body .affep-accueil .publics-adhesion {grid-template-columns: minmax(0, 1fr); row-gap: 16px;}
body .affep-accueil .fin .bouton {width: 100%; max-width: 360px; justify-content: center;}
}
@media (prefers-reduced-motion: reduce) {
body .affep-accueil, body .affep-accueil * {transition: none !important;}
}

/* Bandeau de consentement compact sur cet accueil uniquement. */
@media (max-width: 800px) {
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner {padding: 12px 16px; row-gap: 0;}
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {position: absolute; top: 8px; right: 8px; padding: 0; min-height: 24px;}
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {font-size: 12px; line-height: 1.45; margin: 0 0 12px; padding-right: 28px;}
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 0;}
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {min-height: 44px; height: auto; padding: 10px 8px; margin: 0; font-size: 14px; line-height: 1.3;}
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-view-preferences,
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-save-preferences {grid-column: 1 / -1;}
body.affep-accueil-fil #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links {margin-top: 8px;}
}