/* À propos — « carnet de comptage » (18/10/2026). Chargé sur cette seule page. */
.ap { background: var(--cda-papier); color: var(--cda-noir); overflow-x: clip; }
.ap-grue { width: 30px; height: 17px; display: inline-block; flex: none; }
.ap-h2 { font: 800 clamp(28px, 3vw, 40px)/1.1 var(--sb-titre); letter-spacing: -.02em; margin: 0 0 18px; color: var(--cda-noir); text-wrap: balance; }
.ap-h2--clair { color: #fff; }

/* 1. Ouverture */
.ap-ouverture { padding-block: clamp(24px, 3vw, 44px) clamp(32px, 4vw, 56px); }
.ap-ouverture-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.ap-surtitre { font: 700 12px var(--cda-utilitaire); letter-spacing: .16em; text-transform: uppercase; color: var(--cda-calotte); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.ap-surtitre::before { content: ""; width: 38px; height: 2px; background: var(--cda-calotte); }
.ap-titre { font: 800 clamp(40px, 6.4vw, 92px)/.98 var(--sb-titre); letter-spacing: -.04em; margin: 0; color: var(--cda-noir); text-wrap: balance; }
.ap-titre em { font-style: italic; font-weight: 700; color: var(--cda-calotte); text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; text-decoration-color: var(--cda-noir); }
.ap-chapo { font: 400 clamp(18px, 1.5vw, 22px)/1.55 var(--sb-lecture); color: var(--cda-cendre); max-width: 34em; margin: 28px 0 0; }
.ap-arche { position: relative; margin: 0; aspect-ratio: 4/5; border-radius: 999px 999px 14px 14px; overflow: hidden; background: var(--cda-eau); box-shadow: var(--cda-ombre-vol); }
.ap-arche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-arche-vol { position: absolute; left: 12%; top: 16%; color: #fff; width: 70%; height: 90px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.ap-arche-vol .ap-grue { position: absolute; width: 46px; height: 26px; }
.ap-arche-vol .ap-grue:nth-child(1) { left: 0; top: 40px; transform: rotate(-8deg); }
.ap-arche-vol .ap-grue:nth-child(2) { left: 22%; top: 22px; transform: rotate(-6deg) scale(.9); }
.ap-arche-vol .ap-grue:nth-child(3) { left: 44%; top: 0; transform: rotate(-4deg) scale(1.1); }
.ap-arche-vol .ap-grue:nth-child(4) { left: 66%; top: 24px; transform: rotate(-8deg) scale(.8); }
.ap-arche-vol .ap-grue:nth-child(5) { left: 86%; top: 48px; transform: rotate(-10deg) scale(.7); }

/* 2. Manifeste en marge */
.ap-manifeste { padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--cda-noir); }
.ap-manifeste-grille { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.ap-marge { border-right: 1px solid var(--cda-filet); padding-right: clamp(18px, 3vw, 36px); }
.ap-marge-etiquette { font: 700 11.5px var(--cda-utilitaire); letter-spacing: .14em; text-transform: uppercase; color: var(--cda-calotte); margin: 0 0 10px; }
.ap-marge-note { font: italic 400 18px/1.55 var(--sb-lecture); color: var(--cda-sapin); margin: 0 0 22px; }
.ap-marge-photo { margin: 0; }
.ap-marge-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }
.ap-marge-photo figcaption { font: 500 12.5px var(--cda-utilitaire); color: var(--cda-cendre); margin-top: 8px; }
.ap-colonnes { column-count: 2; column-gap: clamp(28px, 4vw, 56px); font: 400 clamp(17px, 1.25vw, 19px)/1.7 var(--sb-lecture); }
.ap-colonnes .ap-h2 { column-span: all; }
.ap-colonnes p { margin: 0 0 1em; break-inside: avoid-column; }
.ap-colonnes p:first-of-type::first-letter { float: left; font: 800 4.4em/.82 var(--sb-titre); color: var(--cda-calotte); padding: .06em .1em 0 0; }

/* 3. Vol des rubriques */
.ap-vol { background: var(--cda-sapin); color: #fff; padding-block: clamp(44px, 6vw, 84px); }
.ap-vol-intro { font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--sb-lecture); color: #D4DED7; max-width: 36em; margin: 0 0 clamp(24px, 3vw, 40px); }
.ap-vol-cadre { position: relative; height: 430px; margin-top: 26px; color: #F2C14E; }
.ap-vol-traits { position: absolute; inset: 0; opacity: .75; width: 100%; height: 100%; overflow: visible; }
.ap-noeud { position: absolute; left: var(--x); top: var(--y); width: min(240px, 30%); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px 16px; z-index: 1; background: #2D4F3F; border: 1px solid rgba(255,255,255,.34); border-radius: 12px; color: #fff; text-decoration: none; transition: background .25s, border-color .25s, transform .25s; }
.ap-noeud .ap-grue { color: #F2C14E; grid-row: 1 / 3; }
.ap-noeud-nom { font: 800 17px/1.2 var(--sb-titre); }
.ap-noeud-n { font: 500 12.5px var(--cda-utilitaire); color: #D4DED7; }
.ap-noeud:hover, .ap-noeud:focus-visible { background: #3A6150; border-color: #fff; transform: translateY(-3px); }
.ap-noeud:focus-visible { outline: 3px solid #F2C14E; outline-offset: 3px; }
.ap-noeud--tete { background: var(--cda-calotte); border-color: var(--cda-calotte); }
.ap-noeud--tete .ap-grue { color: #fff; }
.ap-noeud--tete .ap-noeud-n { color: #FBE3E4; }

/* 4. Registre de méthode */
.ap-registre { padding-block: clamp(44px, 6vw, 84px); background: var(--cda-papier); }
.ap-lignes { list-style: none; margin: 0; padding: 0; counter-reset: lig; border-top: 2px solid var(--cda-noir); }
.ap-lignes li { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 44px); align-items: center; padding: 26px 0; border-bottom: 1px solid var(--cda-filet); background-image: linear-gradient(transparent calc(100% - 1px), rgba(30,58,46,.08) 0); }
.ap-lignes h3 { font: 800 clamp(19px, 1.7vw, 24px)/1.2 var(--sb-titre); margin: 0; }
.ap-lignes p { font: 400 17px/1.6 var(--sb-lecture); color: var(--cda-cendre); margin: 0; }
.ap-bataille svg { width: 100px; height: 50px; fill: none; stroke: var(--cda-calotte); stroke-width: 3.4; stroke-linecap: round; display: block; }
.ap-registre-lien { margin: 26px 0 0; }
.ap-registre-lien a { font: 700 15px var(--cda-utilitaire); color: var(--cda-noir); text-decoration: underline; text-decoration-color: var(--cda-calotte); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* 5. Signatures */
.ap-signatures { padding-block: clamp(44px, 6vw, 84px); background: var(--cda-brume); }
.ap-signatures-intro { font: 400 18px/1.55 var(--sb-lecture); color: var(--cda-cendre); max-width: 34em; margin: 0 0 clamp(30px, 4vw, 56px); }
.ap-signes { display: grid; gap: clamp(40px, 5vw, 72px); }
.ap-signe { display: grid; grid-template-columns: 250px minmax(0, 680px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ap-signe--droite { margin-left: auto; grid-template-columns: minmax(0, 680px) 250px; }
.ap-signe--droite .ap-signe-photo { order: 2; }
.ap-signe-photo { position: relative; display: block; width: 250px; aspect-ratio: 5/6.2; border-radius: 125px 125px 8px 8px; background: var(--cda-eau-pale); box-shadow: 0 0 0 8px var(--cda-papier), 0 0 0 10px var(--cda-sapin); }
.ap-signe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ap-signe-tampon { position: absolute; right: -22px; bottom: 26px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--cda-calotte); color: #fff; font: 600 11px/1 var(--cda-utilitaire); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-12deg); border: 3px double #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.ap-signe-tampon b { font: 800 30px/1 var(--sb-titre); letter-spacing: 0; }
.ap-signe--droite .ap-signe-tampon { right: auto; left: -22px; transform: rotate(10deg); }
.ap-signe-role { font: 700 11.5px var(--cda-utilitaire); letter-spacing: .12em; text-transform: uppercase; color: var(--cda-calotte); margin: 0 0 8px; }
.ap-signe-nom { font: italic 800 clamp(38px, 4.6vw, 64px)/1 var(--sb-lecture); letter-spacing: -.02em; margin: 0 0 16px; }
.ap-signe-nom a { color: var(--cda-sapin); text-decoration: none; background: linear-gradient(var(--cda-calotte), var(--cda-calotte)) 0 100% / 100% 4px no-repeat; padding-bottom: 4px; }
.ap-signe-bio { font: 400 18px/1.65 var(--sb-lecture); color: var(--cda-noir); margin: 0 0 14px; }
.ap-signe-lien { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px var(--cda-utilitaire); color: var(--cda-noir); text-decoration: underline; text-decoration-color: var(--cda-calotte); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* 6. Lettre — bordure « par avion » */
.ap-lettre { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); background: var(--cda-papier); }
.ap-lettre-feuille { position: relative; background: #fff; color: var(--cda-noir); padding: clamp(36px, 5vw, 68px); max-width: 920px; margin-inline: auto; border: 14px solid transparent; border-image: repeating-linear-gradient(135deg, var(--cda-calotte) 0 16px, #fff 16px 32px, var(--cda-eau) 32px 48px, #fff 48px 64px) 14; box-shadow: var(--cda-ombre-carte); }
.ap-lettre-feuille::before { content: "PAR AVION · LETTRE À LA RÉDACTION"; display: block; font: 700 11.5px var(--cda-utilitaire); letter-spacing: .18em; color: var(--cda-calotte); margin-bottom: 18px; }
.ap-lettre-feuille .ap-h2 { color: var(--cda-noir); max-width: 14em; padding-right: 100px; }
.ap-lettre-feuille p { font: 400 clamp(17px, 1.4vw, 20px)/1.6 var(--sb-lecture); color: var(--cda-cendre); margin: 0 0 22px; max-width: 34em; }
.ap-timbre { position: absolute; right: clamp(16px, 3vw, 32px); top: clamp(30px, 4vw, 44px); width: 76px; height: 92px; display: grid; place-items: center; background: var(--cda-calotte); color: #fff; border: 4px dotted #fff; outline: 1px solid var(--cda-filet); border-radius: 4px; transform: rotate(5deg); }
.ap-timbre .ap-grue { width: 40px; height: 23px; }
.ap-lettre-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin: 0; }
.ap-lettre-lien { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px var(--cda-utilitaire); color: var(--cda-noir); text-decoration: underline; text-decoration-color: var(--cda-calotte); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Mobile */
@media (max-width: 900px) {
	.ap-ouverture-grille { grid-template-columns: 1fr; }
	.ap-arche { max-width: 420px; aspect-ratio: 4/4.4; }
	.ap-manifeste-grille { grid-template-columns: 1fr; }
	.ap-marge { border-right: 0; border-bottom: 1px solid var(--cda-filet); padding: 0 0 22px; }
	.ap-colonnes { column-count: 1; }
	.ap-vol-cadre { height: auto; display: grid; gap: 12px; }
	.ap-vol-traits { display: none; }
	.ap-noeud { position: relative; left: auto; top: auto; width: auto; margin-left: calc(var(--rang) * 3.2%); }
	.ap-lignes li { grid-template-columns: 70px minmax(0, 1fr); row-gap: 8px; align-items: start; }
	.ap-lignes h3 { align-self: center; }
	.ap-lignes li p { grid-column: 1 / -1; }
	.ap-bataille svg { width: 66px; height: 34px; }
	.ap-signe, .ap-signe--droite { grid-template-columns: 1fr; margin-left: 0; gap: 26px; }
	.ap-signe--droite .ap-signe-photo { order: 0; }
	.ap-signe-photo { width: min(240px, 70%); margin-left: 10px; }
	.ap-signe--droite .ap-signe-tampon { left: auto; right: -22px; }
	.ap-lettre-feuille { padding-top: 28px; }
	.ap-lettre-feuille .ap-h2 { padding-right: 0; padding-top: 6px; }
	.ap-timbre { position: static; display: grid; margin: 0 0 14px auto; width: 58px; height: 70px; }
}
@media (prefers-reduced-motion: no-preference) {
	.ap-arche-vol { animation: ap-derive 9s ease-in-out infinite alternate; }
	@keyframes ap-derive { from { translate: 0 0; } to { translate: 26px -10px; } }
}