/* ==========================================================================
   Page Actualités (/actualites/) : formulaire d'inscription, raisons de
   s'inscrire, panneaux « en un coup d'œil », article, modale.
   S'appuie sur les variables de base.css et les composants (.hero, .btn,
   .badge, .bento-card, .section-title, .fab-*) de components.css et
   sections.css : mêmes tailles de titres et de texte que l'accueil, tout
   aligné à gauche.
   ========================================================================== */

.is-hidden{display:none!important}

/* --- Héro : panneau « Réseaux sociaux » à droite (le héro scindé est défini dans sections.css) --- */
.hero__side{width:100%;opacity:0;animation:hero-fade-up 0.35s ease-out 0.22s forwards;--card-bg:#FBF9FE;--dash:rgba(107,33,168,0.5);border:1px solid rgba(107,33,168,0.25);box-shadow:none}
.hero__side .quick-panel__title{color:#4A1A78;display:flex;align-items:center;gap:0.5rem}
.hero__side .quick-list li + li,.hero__side .quick-icons{border-color:rgba(107,33,168,0.15)}
.hero__side .quick-item__title{color:var(--color-blue-dark)}
.hero__side .quick-item:hover{background:transparent}
.hero__side .quick-item:hover .quick-item__title{color:var(--color-blue-dark)}
.hero__side .quick-item__meta{color:#6B21A8;opacity:1}
.hero__side .quick-panel__more--muted{color:var(--color-blue-dark);opacity:1}
.hero__side .quick-video__thumb{background:#6B21A8}
.hero .hero__actions{width:100%}
.news-form{display:flex;flex-direction:column;gap:0.75rem;width:100%;max-width:640px}
.news-form__row{display:flex;gap:0.75rem;flex-wrap:wrap}
.news-form__field{position:relative;flex:1 1 220px;min-width:0}
.news-form__label{display:block;margin-bottom:0.3rem;font-size:0.8rem;font-weight:600;color:var(--color-blue-dark)}
.news-form__field .news-form__status{top:auto;bottom:0.95rem;transform:none}
.news-form__row .btn{align-self:flex-end}
.news-form__input{width:100%;padding:0.875rem 1rem;font:inherit;font-size:1rem;color:var(--color-blue-dark);background:var(--color-white);border:2px solid var(--color-orange-accent);border-radius:var(--radius-btn);box-shadow:var(--shadow-base);transition:box-shadow 0.2s ease,border-color 0.2s ease}
.news-form__input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,127,50,0.2)}
.news-form__input::placeholder{color:#94a3b8}
.news-form__input--email{padding-right:3rem}
.news-form__status{position:absolute;right:1rem;top:50%;transform:translateY(-50%);pointer-events:none;display:none}
.news-form__status.is-valid{display:block;color:#2ecc71}
.news-form__status.is-invalid{display:block;color:#e74c3c}
.news-form .btn{flex:0 0 auto;white-space:nowrap;cursor:pointer;font:inherit;font-weight:600}
.news-form .btn:disabled{opacity:0.6;cursor:wait;transform:none;box-shadow:none}
.news-form.is-busy{opacity:0.6;pointer-events:none}
.news-form__error{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;font-size:0.85rem;font-weight:500;color:#b91c1c;background:#fef2f2;border-left:4px solid #ef4444;border-radius:var(--radius-btn)}
.news-form__privacy{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;opacity:0.75}
.news-form__privacy input{width:1rem;height:1rem;accent-color:var(--color-orange-accent);cursor:pointer;flex-shrink:0}
.news-form__privacy label{cursor:pointer}
.news-form__privacy a{color:inherit;text-decoration:underline dotted}
.news-form__privacy a:hover{color:var(--color-orange-accent)}
.news-form__success{padding:2rem;background:var(--color-white);border:2px solid rgba(46,204,113,0.3);border-radius:var(--radius-bento);box-shadow:var(--shadow-hover);display:flex;align-items:flex-start;gap:1.25rem;animation:hero-fade-up 0.3s ease-out both}
.news-form__success-icon{flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(46,204,113,0.12);color:#2ecc71}
.news-form__success-icon--exists{background:rgba(255,127,50,0.12);color:var(--color-orange-accent)}
.news-form__success h3{font-size:1.25rem;margin-bottom:0.5rem}
.news-form--shake{animation:form-nudge 0.3s ease}
/* Rappel manuscrit sous le formulaire, flèche pointillée vers le bouton */
.news-hint{display:flex;align-items:flex-end;justify-content:flex-end;gap:0.5rem;margin-top:0.75rem;font-family:'Caveat',cursive;font-size:1.4rem;line-height:1.15;color:#64748b;opacity:0;animation:hero-fade-up 0.35s ease-out 0.3s forwards}
.news-hint__text{max-width:24ch;text-align:right;transform:rotate(-2deg)}
.news-hint__arrow{flex-shrink:0;color:var(--color-orange-accent);margin-bottom:0.5rem}
.news-hint__curve{stroke-dasharray:6 6}

/* --- Raisons de s'inscrire --------------------------------------------- */
.news-why__intro{max-width:60ch;margin:-1rem 0 2rem}
/* « Un vrai humain » : carte bento sur deux colonnes, à droite */
.bento-card--callout{--card-bg:#FFF3E8;border:2px solid rgba(255,127,50,0.2);box-shadow:none;--dash:rgba(255,127,50,0.5)}
.bento-card--callout .bento-card__title{font-family:'Caveat',cursive;font-weight:600;font-size:2rem;line-height:1.1;margin-bottom:0.75rem}
.bento-card--callout strong{color:var(--color-orange-text)}
.bento-card__weight{position:absolute;top:0.75rem;right:1.25rem;font-family:var(--font-heading);font-weight:800;font-size:3rem;line-height:1;color:#A78BFA;opacity:0.45;transition:opacity 0.3s ease;pointer-events:none}
.bento-card:hover .bento-card__weight{opacity:0.65}
.bento-card__icon{color:var(--color-orange-accent);margin-bottom:1rem}
.bento-card--support{--card-bg:#EEFBF3;border:1px solid rgba(46,204,113,0.25);box-shadow:none;--dash:rgba(46,204,113,0.5)}
.bento-card--support .bento-card__icon,.bento-card--support .bento-card__title{color:var(--color-green-text)}

/* --- Bas de page : article + colonne « en un coup d'œil » --------------- */
.bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.quick__title{font-size:1.5rem;margin-bottom:0.5rem}
.quick__intro{max-width:60ch;margin:0 0 1.5rem;font-size:0.9rem;opacity:0.8}
.quick-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* Panneau (la bordure pointillée décalée vient de components.css) */
.quick-panel{display:flex;flex-direction:column;padding:1.5rem;border-radius:var(--radius-bento);box-shadow:var(--shadow-base);min-width:0}
.quick-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:0.75rem}
.quick-panel__title{font-size:1rem;margin:0}
.quick-panel__more{flex-shrink:0;font-size:0.75rem;font-weight:600;color:var(--color-orange-text);text-decoration:none;white-space:nowrap}
.quick-panel__more:hover{text-decoration:underline dotted}
.quick-panel__more--muted{color:var(--color-text-main);opacity:0.5;font-weight:500}
.quick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.quick-list li + li{border-top:1px solid #E2E8F0}
.quick-item{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 0.5rem;margin:0 -0.5rem;border-radius:var(--radius-btn);text-decoration:none;color:inherit;transition:background-color 0.3s ease}
.quick-item:hover{background:var(--color-bg-light)}
.quick-item__body{display:flex;flex-direction:column;gap:0.2rem;min-width:0}
.quick-item__title{font-weight:600;font-size:0.9rem;line-height:1.35;color:var(--color-blue-dark);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.3s ease}
.quick-item:hover .quick-item__title{color:var(--color-orange-accent)}
.quick-item__meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.75rem;opacity:0.65}
.quick-item__meta .badge{font-size:0.75rem;padding:0.1rem 0.5rem}
.quick-item__source{font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--color-orange-text)}
.quick-item__rank{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:800;font-size:0.8rem;background:rgba(255,127,50,0.1);color:var(--color-orange-accent)}
.quick-item__icon{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:var(--radius-btn);display:flex;align-items:center;justify-content:center;background:rgba(26,43,72,0.06);color:var(--color-blue-dark)}
.quick-item__thumb{flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:var(--radius-btn);overflow:hidden;background:#E2E8F0}
.quick-item__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.quick-subtitle{display:block;margin:0.75rem 0 0.25rem;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.6}
.quick-item__title--light{font-weight:500}
/* Réseaux : icônes rondes */
.quick-icons{display:flex;justify-content:center;gap:0.6rem;margin-top:auto;padding-top:1rem;border-top:1px solid #E2E8F0}
.quick-icons__link{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(26,43,72,0.06);color:var(--color-blue-dark);transition:opacity 0.2s ease}
.quick-icons__link svg{width:18px;height:18px}
.quick-icons__link--youtube{background:#FF0000;color:#fff}
.quick-icons__link--tiktok{background:#010101;color:#fff}
.quick-icons__link--instagram{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);color:#fff}
.quick-icons__link--linkedin{background:#0A66C2;color:#fff}
.quick-icons__link--facebook{background:#1877F2;color:#fff}
.quick-icons__link:hover{opacity:0.7}
.quick-empty{padding:1rem 0;font-size:0.9rem;opacity:0.7}

/* Vidéos : petites vignettes verticales (les miniatures YouTube ne supportent pas l'agrandissement) */
.quick-video__thumb{position:relative;flex-shrink:0;width:3.25rem;height:4.5rem;border-radius:var(--radius-btn);overflow:hidden;background:var(--color-blue-dark)}
.quick-video__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.quick-video__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--color-white);background:rgba(26,43,72,0.25)}
.quick-video__play svg{margin-left:2px;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5))}

/* Instagram : trois vignettes carrées */
.quick-insta{margin-top:auto;padding-top:0.9rem;border-top:1px solid #E2E8F0}
.quick-insta__label{display:block;margin-bottom:0.5rem;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.6}
.quick-insta__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.quick-insta__post{display:block;aspect-ratio:1;border-radius:var(--radius-btn);overflow:hidden;background:#E2E8F0}
.quick-insta__post img{width:100%;height:100%;object-fit:cover;display:block}

/* Projets au hasard */
.quick-projects{display:flex;flex-direction:column;gap:1rem}
.quick-project{display:flex;flex-direction:column;gap:0.4rem;align-items:flex-start}
.quick-project + .quick-project{padding-top:1rem;border-top:1px solid #E2E8F0}
.quick-project__text{font-size:0.85rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.quick-project__link{font-size:0.85rem;font-weight:600;color:var(--color-blue-dark);text-decoration:underline dotted;text-decoration-color:var(--color-orange-accent);text-underline-offset:3px;transition:color 0.3s ease}
.quick-project__link:hover{color:var(--color-orange-text)}

/* --- Article ------------------------------------------------------------ */
.news-article{max-width:75ch}
.news-article p{margin-bottom:1.25rem}
.news-article strong{color:var(--color-orange-text)}
.news-article strong.is-dark{color:var(--color-blue-dark)}
.news-article h3{font-size:1.125rem;margin:2rem 0 0.75rem;display:flex;align-items:center;gap:0.5rem}
.news-article h3 svg{color:var(--color-orange-text);flex-shrink:0}
.news-article__box{padding:0.5rem 0 0.5rem 1.5rem;margin:2rem 0;border-left:4px solid var(--color-orange-accent);background:rgba(255,127,50,0.05);border-radius:0 var(--radius-btn) var(--radius-btn) 0}
.news-article__box h3{margin-top:0;color:var(--color-orange-text)}
.news-article__box p{margin-bottom:0.5rem}
.news-article__box--violet{border-color:#6B21A8;background:#FBF9FE}
.news-article__box--violet h3,.news-article__box--violet a{color:#4A1A78}
.news-article__box a{font-weight:600}
.news-article__author{display:flex;align-items:flex-start;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid #E2E8F0;opacity:0.6;transition:opacity 0.3s ease}
.news-article__author:hover{opacity:1}
.news-article__author img{width:4rem;height:4rem;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-hover);flex-shrink:0}
.news-article__author-name{font-family:var(--font-heading);font-weight:700;font-size:1.125rem;color:var(--color-blue-dark)}
.news-article__author-role{font-size:0.85rem;font-weight:600;color:var(--color-orange-text);margin-bottom:0.5rem}
.news-article__author p{font-size:0.9rem;margin:0}

/* --- Modale confidentialité -------------------------------------------- */
.modal{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;padding:1.5rem;background:rgba(26,43,72,0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal.is-open{display:flex}
.modal__content{position:relative;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;padding:2rem;background:var(--color-white);border-radius:var(--radius-bento);box-shadow:var(--shadow-hover)}
.modal__close{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;color:#94a3b8;transition:color 0.3s ease}
.modal__close:hover{color:var(--color-orange-accent)}
.modal__content h2{font-size:1.5rem;margin-bottom:1rem}
.modal__content ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem;margin:1rem 0;font-size:0.95rem}
.modal__content a{color:var(--color-orange-accent);font-weight:600}
.modal__footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #E2E8F0;display:flex;justify-content:flex-end}
.modal__footer a{font-size:0.9rem;font-weight:600;color:var(--color-text-main);text-decoration:underline dotted;text-underline-offset:4px}
.modal__footer a:hover{color:var(--color-orange-accent)}


/* --- QR code ------------------------------------------------------------ */
.news-back{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-main);opacity:0.6;text-decoration:none;transition:opacity 0.3s ease,color 0.3s ease}
.news-back:hover{opacity:1;color:var(--color-orange-accent)}

/* --- Responsive --------------------------------------------------------- */
@media (min-width:768px){
    .bento-card--callout{grid-column:-3 / -1}
}
@media (min-width:768px) and (max-width:1023px){
    .quick-panel--wide{grid-column:span 2}
}
@media (min-width:1024px){
    .hero__side{flex:0 0 360px;align-self:center;margin-left:auto}
    .hero--split .hero__main{justify-content:center;min-height:100%}
    .bottom{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
    .bottom .news-article{grid-column:1;grid-row:1}
    .bottom .quick{grid-column:2;grid-row:1}
    .quick-grid{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width:768px){
    .bento-card--callout .bento-card__title{font-size:1.75rem}
    .news-form__success{flex-direction:column}
}