/* =========================================================================
   ASSOCIATION IDÆON — feuille de style
   Palette d'après le logo : bleu #0E6EB8 · rouge #E60013 · noir · blanc
   Typographie : Jost (géométrique, façon Futura) + EB Garamond (éditorial)
   Polices auto-hébergées (aucun appel externe — respect du RGPD).
   ========================================================================= */

/* ---------- Polices ------------------------------------------------------ */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/jost-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/jost-300-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jost-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jost-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jost-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jost-500-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-400i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/eb-garamond-400i-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/eb-garamond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/eb-garamond-500-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Variables ---------------------------------------------------- */
:root{
  --blue:#0E6EB8;
  --red:#E60013;
  --ink:#16181c;            /* presque noir, pour le texte courant */
  --black:#000;
  --paper:#fff;
  --muted:#6c6f76;          /* notes, mentions facultatives */
  --line:#e2e1da;           /* filets fins */
  --line-strong:#111;
  /* Latin via Jost/Garamond ; les glyphes japonais retombent automatiquement
     sur les polices système (couverture complète, aucun téléchargement). */
  --sans:'Jost','Futura','Century Gothic','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'EB Garamond','Iowan Old Style','Palatino Linotype','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',Georgia,serif;
  --maxw:38rem;
}

/* ---------- Base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover,a:focus-visible{color:var(--red);}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
::selection{background:var(--blue);color:#fff;}

/* ---------- Mise en page ------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.5rem;}
main{flex:1 0 auto;}

/* En-tête des pages intérieures */
.topbar{
  width:100%;max-width:62rem;margin:0 auto;
  padding:1.6rem 1.5rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.topbar .brand{display:flex;align-items:center;gap:.7rem;font-family:var(--sans);
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--ink);}
.topbar .brand img{height:42px;width:auto;}
.topbar .brand:hover{color:var(--ink);}
.topbar nav{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;display:flex;gap:1.4rem;align-items:center;}

/* Sélecteur de langue (les deux langues toujours visibles, l'active en noir) */
.langswitch{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;display:inline-flex;gap:.55rem;align-items:center;}
.langswitch a{color:var(--blue);}
.langswitch a:hover,.langswitch a:focus-visible{color:var(--red);}
.langswitch [aria-current]{color:var(--ink);}
.langswitch .sep{color:#cdccc5;}

/* Filet tricolore — petit motif repris du logo */
.tricolor{height:3px;width:84px;margin:0 auto;border:0;
  background:linear-gradient(90deg,var(--blue) 0 33.34%,var(--black) 0 66.67%,var(--red) 0);}
.tricolor--wide{width:100%;max-width:none;}

/* ---------- Titres & texte ---------------------------------------------- */
h1,h2,h3{font-family:var(--sans);font-weight:400;color:var(--black);line-height:1.2;}
.page-title{
  font-weight:300;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(1.5rem,4.5vw,2.1rem);text-align:center;margin:0 0 .4rem;
}
.page-kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;
  font-size:.7rem;color:var(--muted);text-align:center;margin:0 0 1.3rem;}
h2{font-weight:400;letter-spacing:.02em;font-size:1.25rem;margin:2.4rem 0 .6rem;}
.lead{font-size:1.12rem;}
p{margin:0 0 1.05rem;}
.muted{color:var(--muted);}
.req{color:var(--red);font-family:var(--sans);}

/* ---------- Page d'accueil (hero) --------------------------------------- */
.hero{
  flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:3rem 1.5rem 2rem;gap:0;
}
.hero__logo{width:min(560px,82vw);margin-bottom:2.4rem;}
.hero__name{font-family:var(--sans);font-weight:300;letter-spacing:.34em;
  text-transform:uppercase;font-size:.8rem;color:var(--muted);margin:0 0 1.7rem;
  padding-left:.34em;}
.motto{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:.4rem 0 0;}
.motto__fr{font-family:var(--sans);font-weight:300;text-transform:uppercase;
  letter-spacing:.22em;font-size:clamp(1.15rem,4vw,1.7rem);color:var(--ink);margin:0;padding-left:.22em;}
.motto__jp{font-family:var(--serif);font-size:clamp(1.25rem,4.4vw,1.85rem);
  letter-spacing:.12em;color:var(--ink);margin:0;}
.hero .tricolor{margin:2.2rem auto;}
.hero__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;}
.hero__links a{position:relative;padding-bottom:.25rem;}
.hero__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .35s ease;}
.hero__links a:hover::after,.hero__links a:focus-visible::after{right:0;}
.hero__lang{font-size:.68rem;color:var(--muted);letter-spacing:.16em;}

/* ---------- Article (statuts) ------------------------------------------- */
.article{padding:1rem 0 2rem;}
.article p{text-align:justify;hyphens:auto;}
.article h2{position:relative;padding-top:1.2rem;}
.member-block{margin:1.3rem 0;padding-left:1.1rem;border-left:2px solid var(--line);}
.member-block h3{font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;margin:0 0 .35rem;}
.member-block.is-blue{border-color:var(--blue);}
.member-block.is-red{border-color:var(--red);}

/* ---------- Boutons & liens texte --------------------------------------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.78rem;line-height:1;cursor:pointer;
  padding:1.05rem 2.2rem;border:1px solid var(--black);background:var(--black);color:#fff;
  border-radius:0;transition:background .25s,border-color .25s,color .25s;
}
.btn:hover,.btn:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff;}
.backlink{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;}

/* ---------- Formulaires -------------------------------------------------- */
.form-intro{text-align:center;max-width:32rem;margin:1.6rem auto 2.4rem;color:var(--muted);
  font-size:1rem;}
form{margin:0 auto;}
.field{margin-bottom:1.7rem;}
.field > label{display:block;font-family:var(--sans);font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;color:var(--ink);margin-bottom:.5rem;}
.note{display:block;font-style:italic;font-size:.92rem;color:var(--muted);
  margin-top:.4rem;line-height:1.5;}
input[type=text],input[type=email]{
  width:100%;font-family:var(--serif);font-size:1.05rem;color:var(--ink);
  padding:.7rem .85rem;background:#fff;border:1px solid #cfcec6;border-radius:0;
  transition:border-color .2s,box-shadow .2s;
}
input[type=text]:focus,input[type=email]:focus{
  outline:none;border-color:var(--blue);box-shadow:inset 0 -2px 0 0 var(--blue);
}
input::placeholder{color:#b6b5ad;}

/* Cases à cocher */
.checks{border:0;margin:0;padding:0;}
.check{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 0;
  border-top:1px solid var(--line);}
.check:last-child{border-bottom:1px solid var(--line);}
.check input[type=checkbox]{flex:0 0 auto;margin-top:.28rem;width:1.05rem;height:1.05rem;
  accent-color:var(--blue);}
.check label{cursor:pointer;}
.check .check__title{display:block;}
.check.is-required .check__title::after{content:" *";color:var(--red);}

.form-actions{text-align:center;margin-top:2.4rem;}
.privacy-note{font-style:italic;font-size:.88rem;color:var(--muted);text-align:center;
  margin:1.6rem auto 0;max-width:30rem;line-height:1.5;}

/* Honeypot anti-spam (caché aux humains) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* Bandeau d'erreur (validation serveur) */
.alert{border:1px solid var(--red);color:var(--red);background:#fff;
  font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;
  padding:.85rem 1.1rem;margin-bottom:2rem;text-align:center;}

/* ---------- Pied de page ------------------------------------------------- */
footer{flex-shrink:0;margin-top:4rem;padding:3.2rem 1.5rem 3.6rem;text-align:center;}
footer .tricolor{margin-bottom:2.4rem;}
.foot-name{font-family:var(--sans);text-transform:uppercase;letter-spacing:.26em;
  font-size:.72rem;color:var(--ink);margin:0 0 .5rem;}
.foot-meta{font-size:.9rem;color:var(--muted);margin:0;}
.foot-nav{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:.68rem;margin:.9rem 0 0;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;}
.foot-contact{margin:0;}
.foot-contact a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-size:.8rem;font-weight:500;color:var(--ink);}
.foot-contact a:hover,.foot-contact a:focus-visible{color:var(--blue);}
html[lang="ja"] .foot-contact a{letter-spacing:.14em;}
.foot-sign{margin:.6rem 0 0;font-family:var(--serif);font-size:.82rem;color:var(--muted);}
.foot-sign a{color:var(--muted);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s;}
.foot-sign a:hover,.foot-sign a:focus-visible{color:var(--blue);border-color:var(--blue);}
html[lang="ja"] .foot-sign{font-family:var(--sans);font-size:.76rem;letter-spacing:.03em;}

/* ---------- Centrage vertical des pages courtes -------------------------- */
.sheet{padding:2.6rem 0 1rem;}
.thanks{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:3rem 1.5rem;gap:1.2rem;}
.thanks .tricolor{margin:.4rem auto 1rem;}

/* Carte « numéro de membre » (membres d'honneur) */
.member-card{display:inline-flex;flex-direction:column;align-items:center;gap:.45rem;
  border:1px solid var(--ink);padding:1.35rem 2.6rem;margin:.4rem auto .6rem;}
.member-card__label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-size:.66rem;color:var(--muted);}
.member-card__num{font-family:var(--sans);font-weight:500;letter-spacing:.16em;
  font-size:2rem;line-height:1;color:var(--blue);}
.member-card__note{font-style:italic;font-size:.84rem;color:var(--muted);}
html[lang="ja"] .member-card__note{font-style:normal;}

/* ---------- Transitions de page fluides (View Transitions API) ----------- */
/* Fondu subtil entre les pages — changement de langue et navigation — au lieu
   d'un rechargement brut. Aucun effet sur les navigateurs non compatibles
   (ils chargent la page normalement). */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: idFadeOut .26s ease both; }
::view-transition-new(root){ animation: idFadeIn  .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes idFadeOut{ to   { opacity:0; transform:translateY(-6px); } }
@keyframes idFadeIn { from { opacity:0; transform:translateY(14px); } }

/* Éléments partagés (accueil → page intérieure) :
   - le logo rétrécit et file dans le coin haut-gauche (il devient la marque) ;
   - le filet tricolore s'allonge et remonte sous le titre ;
   - le titre de la page se révèle en montant. */
.hero__logo{ view-transition-name:site-logo; }
.topbar .brand img{ view-transition-name:site-logo; }
.hero .tricolor{ view-transition-name:site-rule; }
main:not(.hero) .tricolor{ view-transition-name:site-rule; width:140px; }
.page-body{ view-transition-name:site-body; }
::view-transition-group(site-logo),
::view-transition-group(site-rule){
  animation-duration:.46s; animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-group(site-body){ animation-duration:.42s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(site-logo),::view-transition-new(site-logo){ object-fit:contain; }
/* le corps du texte se révèle une fois que le filet tricolore a fini de monter ;
   le titre, lui, apparaît tôt avec le reste de la page. Révélation de haut en bas. */
::view-transition-new(site-body){ animation:idReveal .55s cubic-bezier(.22,1,.36,1) .46s both; }
@keyframes idReveal{
  from{ opacity:0; clip-path:inset(0 0 100% 0); }
  to  { opacity:1; clip-path:inset(0 0 0 0); }
}

/* Changement de langue (type « lang ») : fondu rapide « sur place ».
   Le logo et le filet ne bougent pas (mêmes positions FR/JP), le corps fait un
   simple fondu (sans clip ni délai) → bascule FR ⇄ JP fluide et discrète. */
:root:active-view-transition-type(lang)::view-transition-group(site-logo),
:root:active-view-transition-type(lang)::view-transition-group(site-rule),
:root:active-view-transition-type(lang)::view-transition-old(root),
:root:active-view-transition-type(lang)::view-transition-new(root){
  animation-duration:.34s; animation-timing-function:cubic-bezier(.4,0,.2,1);
}
:root:active-view-transition-type(lang)::view-transition-new(site-body){
  animation:idLangIn .34s cubic-bezier(.4,0,.2,1) both;
}
:root:active-view-transition-type(lang)::view-transition-old(site-body){
  animation:idLangOut .26s ease both;
}
@keyframes idLangIn{ from{ opacity:0; } }
@keyframes idLangOut{ to{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important; }
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:600px){
  .hero__logo{width:62vw;margin-bottom:1.9rem;}   /* le logo plein écran est trop imposant sur mobile */
}
@media (max-width:480px){
  body{font-size:18px;}
  .topbar{flex-direction:column;align-items:center;gap:.8rem;text-align:center;}
  .topbar .brand img{height:38px;}
  .hero__links{gap:.8rem 1.4rem;}
}

/* ---------- Ajustements pour le japonais --------------------------------- */
html[lang="ja"] .note,
html[lang="ja"] .privacy-note,
html[lang="ja"] .form-intro,
[lang="ja"] em{font-style:normal;}
html[lang="ja"] .article p{text-align:left;}

/* ---------- Mouvement réduit / impression -------------------------------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}
@media print{
  body{color:#000;font-size:12pt;}
  .topbar nav,.hero__links,.form-actions,.foot-nav{display:none;}
  a{color:#000;}
}