/* ===========================================================================
   aipeh.fr — feuille de style unique
   Le site est écrit à la main, sans build : ce fichier est servi tel quel.
   Le principe visuel est le mur d'affichage de l'école — des feuilles de
   couleur scotchées de travers, des annotations à la main, un collage et non
   une grille de cartes.
   =========================================================================== */

@font-face{font-family:'Atkinson';src:url('../polices/atkinson.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Atkinson';src:url('../polices/atkinson-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Caveat';src:url('../polices/caveat.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  /* --------------------------------------------------------------- le mur
     Le vert profond, arrêté après essai des sept teintes candidates. */
  --fond:#17807B;
  --sur-fond:#F2F8F6;      /* le texte posé directement sur le mur */
  --annote:#9FD6D0;        /* les annotations manuscrites sur le mur */
  --confetti-op:.82;

  /* ----------------------------------------------------- les deux cartes
     Elles ne reprennent ni la couleur du mur ni sa voisine immédiate : une
     carte turquoise sur mur turquoise cesse d'exister. Même règle pour le
     bouton de l'en-tête, qui se posait sur le mur. */
  --fond-ag:#EFB02A;       --texte-ag:#2A2110;
  --fond-chiffre:#7A5CA8;  --texte-chiffre:#fff;
  --fond-bouton:#EFB02A;   --texte-bouton:#2A2110;

  /* ------------------------------------------------------------ le papier
     Les teintes des feuilles scotchées, et l'encre qu'on écrit dessus. */
  --papier:#FFFDF6;
  --papier-jaune:#FDEFCE;
  --papier-menthe:#D9EFE8;
  --papier-lilas:#EFE3F4;
  --papier-rose:#FBE1D8;
  --papier-vert:#E4EFD6;
  --corail:#E4694F;
  --or:#EFB02A;
  --turquoise:#2AA5A0;
  --prune:#7A5CA8;
  --vert:#2E9E5B;
  --encre:#22322C;

  --scotch:rgba(236,220,176,.66);
  --ombre:10px 14px 24px rgba(0,0,0,.26);
  --ombre-courte:5px 6px 0 rgba(0,0,0,.20);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--fond);color:var(--sur-fond);
  font-family:'Atkinson',system-ui,sans-serif;
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.65;
  overflow-x:hidden;transition:background-color .3s ease;
}
/* grain léger, pour que le mur ne soit pas un aplat mort */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;line-height:1.05;letter-spacing:-.015em}
:focus-visible{outline:3px solid #22322C;outline-offset:3px;border-radius:3px;
  box-shadow:0 0 0 6px #FFFDF6}

.enveloppe{width:min(1120px,100% - 2.5rem);margin-inline:auto;position:relative;z-index:2}

/* ------------------------------------------------------- écrit à la main */
.manuscrit{font-family:'Caveat',cursive;font-weight:600;color:var(--annote);
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.25}

/* ----------------------------------------------------------- confettis --
   De petits papiers éparpillés sur le mur, derrière tout le reste. Ils
   descendent un peu moins vite que la page, ce qui donne du relief. */
.confettis{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--confetti-op)}
.confetti{position:absolute;will-change:transform}

/* -------------------------------------------------------------- feuille */
.feuille{position:relative;background:var(--papier);color:var(--encre);
  padding:clamp(1.5rem,3.4vw,2.4rem);box-shadow:var(--ombre);border-radius:3px}
.feuille::before{
  content:"";position:absolute;top:-13px;left:50%;width:114px;height:30px;
  translate:-50% 0;rotate:-2.4deg;background:var(--scotch);
  clip-path:polygon(3% 8%,12% 0,26% 9%,40% 1%,55% 10%,70% 2%,84% 11%,97% 3%,
                    100% 92%,86% 100%,71% 91%,56% 99%,42% 90%,28% 99%,14% 89%,0 97%);
  box-shadow:0 2px 5px rgba(0,0,0,.16);
}
.feuille--gauche::before{left:34px;translate:0 0;rotate:-7deg}
.feuille--droite::before{left:auto;right:34px;translate:0 0;rotate:6.5deg}
.feuille--double::after{
  content:"";position:absolute;bottom:-13px;right:38px;width:104px;height:28px;
  rotate:5deg;background:var(--scotch);
  clip-path:polygon(3% 8%,14% 0,28% 9%,44% 1%,60% 10%,76% 2%,90% 11%,100% 4%,
                    100% 92%,88% 100%,72% 91%,56% 99%,40% 90%,26% 99%,12% 89%,0 97%);
  box-shadow:0 2px 5px rgba(0,0,0,.16);
}
.pose{animation:pose .6s cubic-bezier(.2,.9,.3,1.25) backwards}
/* Les feuilles situées plus bas ne se posent qu'au moment où on arrive
   dessus — les animer au chargement les gâcherait hors de l'écran. */
.a-poser{opacity:0}
.a-poser.vu{opacity:1;animation:pose .55s cubic-bezier(.2,.9,.3,1.2) backwards}
@keyframes pose{from{opacity:0;translate:0 18px;rotate:-2.2deg}}

/* -------------------------------------------------------------- bandeau */
.bandeau{position:relative;z-index:30;padding-block:1.4rem}
.bandeau .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.lien-entete{text-decoration:none;font-weight:700;background:var(--fond-bouton);color:var(--texte-bouton);
  padding:.55rem 1.15rem;border-radius:3px;box-shadow:var(--ombre-courte);transition:translate .16s ease}
.lien-entete:hover{translate:-2px -2px}

/* ------------------------------------------------------------ guirlande */
.guirlande{position:relative;z-index:1;line-height:0;margin-top:-.4rem}
.guirlande svg{display:block;width:100%;height:auto}

/* ----------------------------------------------------------------- hero */
.hero{padding-block:clamp(1.2rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem)}
.grille-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3rem);align-items:start}
.feuille-titre{rotate:-.7deg}
/* 3,5 rem est la taille voulue sur grand écran ; le clamp ne sert qu'à
   redescendre sur téléphone, où ce titre très long déborderait. */
.feuille-titre h1{font-size:clamp(1.9rem,1rem + 4.6vw,3.5rem);text-wrap:balance}
.feuille-titre .manuscrit{color:#6F7F72;margin-top:1.1rem;display:block}
.colonne-droite{display:grid;gap:1.7rem;padding-top:1.4rem}

.note-ag{background:var(--fond-ag);color:var(--texte-ag);rotate:1.3deg}
.note-ag .jour{font-size:clamp(1.4rem,1rem + 1.5vw,1.95rem);font-weight:700;line-height:1.25}
.note-ag .lieu{margin-top:.9rem;font-size:.97rem}
.note-ag .manuscrit{color:currentColor;opacity:.62;margin-top:.8rem;display:block}

.note-chiffre{background:var(--fond-chiffre);color:var(--texte-chiffre);rotate:-1.2deg;text-align:center}
.note-chiffre b{display:block;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.2rem);line-height:1;letter-spacing:-.03em}
.note-chiffre span{display:block;margin-top:.4rem;font-size:.97rem}

.actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem;align-items:center}
.bouton{text-decoration:none;font-weight:700;font-size:1.03rem;padding:.8rem 1.5rem;border-radius:3px;
  display:inline-block;box-shadow:var(--ombre-courte);transition:translate .16s ease}
.bouton:hover{translate:-2px -2px}
.bouton--plein{background:var(--corail);color:#fff}
.bouton--creux{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 2.5px var(--encre)}
.bouton--creux:hover{translate:0 -2px}


/* --------------------------------------------------- documents de l'AG */
.papiers{rotate:.7deg;background:var(--papier-menthe)}
.papiers h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem)}
.papiers>p{margin-top:.8rem;max-width:56ch;color:#5E6B62}
.liste-docs{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;gap:.9rem;flex-wrap:wrap}
.liste-docs a{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;
  background:var(--papier-jaune);color:var(--encre);padding:.7rem 1.1rem;border-radius:3px;
  box-shadow:var(--ombre-courte);transition:translate .16s ease}
.liste-docs a:hover{translate:-2px -2px}
.liste-docs svg{flex:none}
.petit{margin-top:1.2rem;font-size:.92rem;color:#5E6B62;max-width:60ch}

/* -------------------------------------------------------------- section */
.section{padding-block:clamp(2.4rem,5.5vw,4.2rem)}
.titre-section{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);max-width:20ch;text-wrap:balance}
.intro{margin-top:.9rem;max-width:56ch;opacity:.86}

.mur{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:clamp(1.4rem,2.6vw,2.2rem);margin-top:3rem}
.depense{padding:1.3rem 1.4rem 1.5rem}
.depense .montant{font-size:1.65rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.depense .quoi{margin-top:.45rem;font-weight:700}
.depense .precision{margin-top:.25rem;font-size:.9rem;color:#5E6B62}
.depense:nth-child(6n+1){rotate:-1deg;background:var(--papier)}
.depense:nth-child(6n+2){rotate:.8deg;background:var(--papier-jaune)}
.depense:nth-child(6n+3){rotate:-.6deg;background:var(--papier-menthe)}
.depense:nth-child(6n+4){rotate:1.1deg;background:var(--papier-lilas)}
.depense:nth-child(6n+5){rotate:-1.2deg;background:var(--papier-rose)}
.depense:nth-child(6n+6){rotate:.7deg;background:var(--papier-vert)}
.depense--phare{grid-column:span 2;background:var(--corail)!important;color:#fff;rotate:-.6deg}
.depense--phare .precision{color:#FBDCD4}
.depense--phare .montant{font-size:2.3rem}

.note-bas{margin-top:2.2rem;max-width:64ch;opacity:.8;font-size:.95rem}

.appel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;rotate:-.45deg}
.appel h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.7rem);max-width:20ch}
.appel p{margin-top:.8rem;max-width:44ch;color:#5E6B62}

.pied{padding-block:2.4rem 3.4rem;opacity:.85;font-size:.95rem}
.pied .enveloppe{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.pied a{font-weight:700}

@media (max-width:820px){
  .grille-hero{grid-template-columns:1fr}
  .colonne-droite{padding-top:0}
  .appel{grid-template-columns:1fr}
  .depense--phare{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .confetti{transform:none!important}
}